@atlaskit/editor-plugin-table 22.3.0 → 22.3.1

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

@@ -3,9 +3,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
-import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
+import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
+import { RowMenu } from '../TableMenu/row/RowMenu';
+import { newMenuWidth } from '../TableMenu/shared/consts';
 import DragMenu from './DragMenu';
+const rowMenuOffset = dragTableInsertColumnButtonSize + 4;
 const FloatingDragMenu = ({
   mountPoint,
   boundariesElement,
@@ -33,7 +37,6 @@ const FloatingDragMenu = ({
   }
   const inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
   const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  const offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
@@ -51,7 +54,7 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth,
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? newMenuWidth : dragMenuDropdownWidth,
     fitHeight: 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.
@@ -59,9 +62,11 @@ const FloatingDragMenu = ({
     ,
     zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: offset,
+    offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, /*#__PURE__*/React.createElement(DragMenu, {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(RowMenu, {
+    api: api
+  }) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

package/dist/es2019/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/es2019/ui/TableMenu/row/RowMenu.js

@@ -0,0 +1,27 @@
+/* RowMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./RowMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ROW_MENU } from './keys';
+const rowMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+export const RowMenu = ({
+  api
+}) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  const rowMenuComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(ROW_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  const surface = rowMenuComponents.find(c => c.type === ROW_MENU.type);
+  if (!surface) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: rowMenuContainerStyles.container,
+    testId: "row-handle-menu"
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: surface,
+    components: rowMenuComponents
+  }));
+};

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addRowAfter, addRowBefore, deleteRow, moveRowDown, moveRowDownOld, moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { DeleteIcon, TableRowAddAboveIcon, TableRowAddBelowIcon, TableRowMoveDownIcon, TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import Toggle from '@atlaskit/toggle';
+export const HeaderRowToggleItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-header-row-toggle",
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      id: "row-menu-toggle-header-row",
+      label: formatMessage(messages.headerRow),
+      isChecked: false
+    })
+  }, formatMessage(messages.headerRow));
+};
+export const NumberedRowsToggleItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-numbered-rows-toggle",
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      id: "row-menu-toggle-numbered-rows",
+      label: formatMessage(messages.numberedRows),
+      isChecked: false
+    })
+  }, formatMessage(messages.numberedRows));
+};
+const getMoveRowUpShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+const getMoveRowDownShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+export const AddRowAboveItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-add-row-above",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addRowBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addRowAbove));
+};
+export const AddRowBelowItem = () => {
+  var _tooltip2;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-add-row-below",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip2 = tooltip(addRowAfter)) !== null && _tooltip2 !== void 0 ? _tooltip2 : ''
+    })
+  }, formatMessage(messages.addRowBelow));
+};
+export const MoveRowUpItem = () => {
+  var _getMoveRowUpShortcut;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-move-row-up",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+    })
+  }, formatMessage(messages.moveRowUp, {
+    0: 1
+  }));
+};
+export const MoveRowDownItem = () => {
+  var _getMoveRowDownShortc;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-move-row-down",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+    })
+  }, formatMessage(messages.moveRowDown, {
+    0: 1
+  }));
+};
+export const DeleteRowItem = () => {
+  var _tooltip3;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-delete-row",
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip3 = tooltip(deleteRow)) !== null && _tooltip3 !== void 0 ? _tooltip3 : ''
+    })
+  }, formatMessage(messages.removeRows, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { BackgroundColorItem } from '../shared/items/BackgroundColorItem';
+import { ClearCellsItem } from '../shared/items/ClearCellsItem';
+import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, BACKGROUND_COLOR_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, CLEAR_CELLS_ITEM, DELETE_ROW_ITEM, TOGGLE_SECTION_ITEM_RANK, BACKGROUND_SECTION_ITEM_RANK, ADD_SECTION_ITEM_RANK, DANGER_SECTION_ITEM_RANK } from './keys';
+import { HeaderRowToggleItem, NumberedRowsToggleItem, AddRowAboveItem, AddRowBelowItem, MoveRowUpItem, MoveRowDownItem, DeleteRowItem } from './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.
+ */
+export const getRowMenuComponents = () => [
+// --- Menu surface ---
+{
+  type: ROW_MENU.type,
+  key: ROW_MENU.key
+},
+// --- Toggle section (Header row, Numbered rows) ---
+{
+  type: ROW_TOGGLE_SECTION.type,
+  key: ROW_TOGGLE_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_SECTION_RANK[ROW_TOGGLE_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: HEADER_ROW_TOGGLE_ITEM.type,
+  key: HEADER_ROW_TOGGLE_ITEM.key,
+  parents: [{
+    type: ROW_TOGGLE_SECTION.type,
+    key: ROW_TOGGLE_SECTION.key,
+    rank: TOGGLE_SECTION_ITEM_RANK[HEADER_ROW_TOGGLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(HeaderRowToggleItem, null)
+}, {
+  type: NUMBERED_ROWS_TOGGLE_ITEM.type,
+  key: NUMBERED_ROWS_TOGGLE_ITEM.key,
+  parents: [{
+    type: ROW_TOGGLE_SECTION.type,
+    key: ROW_TOGGLE_SECTION.key,
+    rank: TOGGLE_SECTION_ITEM_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null)
+},
+// --- Background color section ---
+{
+  type: ROW_BACKGROUND_SECTION.type,
+  key: ROW_BACKGROUND_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_SECTION_RANK[ROW_BACKGROUND_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: BACKGROUND_COLOR_ITEM.type,
+  key: BACKGROUND_COLOR_ITEM.key,
+  parents: [{
+    type: ROW_BACKGROUND_SECTION.type,
+    key: ROW_BACKGROUND_SECTION.key,
+    rank: BACKGROUND_SECTION_ITEM_RANK[BACKGROUND_COLOR_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, {
+    testId: "row-menu-background-color"
+  })
+},
+// --- Add / Move section ---
+{
+  type: ROW_ADD_SECTION.type,
+  key: ROW_ADD_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_SECTION_RANK[ROW_ADD_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: ADD_ROW_ABOVE_ITEM.type,
+  key: ADD_ROW_ABOVE_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ADD_SECTION_ITEM_RANK[ADD_ROW_ABOVE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(AddRowAboveItem, null)
+}, {
+  type: ADD_ROW_BELOW_ITEM.type,
+  key: ADD_ROW_BELOW_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ADD_SECTION_ITEM_RANK[ADD_ROW_BELOW_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(AddRowBelowItem, null)
+}, {
+  type: MOVE_ROW_UP_ITEM.type,
+  key: MOVE_ROW_UP_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_UP_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveRowUpItem, null)
+}, {
+  type: MOVE_ROW_DOWN_ITEM.type,
+  key: MOVE_ROW_DOWN_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_DOWN_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveRowDownItem, null)
+},
+// --- Danger section (Clear cells, Delete row) ---
+{
+  type: ROW_DANGER_SECTION.type,
+  key: ROW_DANGER_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_SECTION_RANK[ROW_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: CLEAR_CELLS_ITEM.type,
+  key: CLEAR_CELLS_ITEM.key,
+  parents: [{
+    type: ROW_DANGER_SECTION.type,
+    key: ROW_DANGER_SECTION.key,
+    rank: DANGER_SECTION_ITEM_RANK[CLEAR_CELLS_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(ClearCellsItem, {
+    testId: "row-menu-clear-cells"
+  })
+}, {
+  type: DELETE_ROW_ITEM.type,
+  key: DELETE_ROW_ITEM.key,
+  parents: [{
+    type: ROW_DANGER_SECTION.type,
+    key: ROW_DANGER_SECTION.key,
+    rank: DANGER_SECTION_ITEM_RANK[DELETE_ROW_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(DeleteRowItem, null)
+}];

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

@@ -0,0 +1,87 @@
+// --- Menu surface ---
+
+export const ROW_MENU = {
+  type: 'menu',
+  key: 'row-handle-menu'
+};
+
+// --- Sections ---
+
+export const ROW_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'row-toggle-section'
+};
+export const ROW_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'row-background-section'
+};
+export const ROW_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'row-add-section'
+};
+export const ROW_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'row-danger-section'
+};
+export const ROW_SECTION_RANK = {
+  [ROW_TOGGLE_SECTION.key]: 100,
+  [ROW_BACKGROUND_SECTION.key]: 200,
+  [ROW_ADD_SECTION.key]: 300,
+  [ROW_DANGER_SECTION.key]: 400
+};
+export const HEADER_ROW_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-row-toggle'
+};
+export const NUMBERED_ROWS_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'numbered-rows-toggle'
+};
+export const BACKGROUND_COLOR_ITEM = {
+  type: 'menu-item',
+  key: 'background-color'
+};
+export const ADD_ROW_ABOVE_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-above'
+};
+export const ADD_ROW_BELOW_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-below'
+};
+export const MOVE_ROW_UP_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-up'
+};
+export const MOVE_ROW_DOWN_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-down'
+};
+export const CLEAR_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'clear-cells'
+};
+export const DELETE_ROW_ITEM = {
+  type: 'menu-item',
+  key: 'delete-row'
+};
+
+// --- Item ranks within their sections ---
+
+export const TOGGLE_SECTION_ITEM_RANK = {
+  [HEADER_ROW_TOGGLE_ITEM.key]: 100,
+  [NUMBERED_ROWS_TOGGLE_ITEM.key]: 200
+};
+export const BACKGROUND_SECTION_ITEM_RANK = {
+  [BACKGROUND_COLOR_ITEM.key]: 100
+};
+export const ADD_SECTION_ITEM_RANK = {
+  [ADD_ROW_ABOVE_ITEM.key]: 100,
+  [ADD_ROW_BELOW_ITEM.key]: 200,
+  [MOVE_ROW_UP_ITEM.key]: 300,
+  [MOVE_ROW_DOWN_ITEM.key]: 400
+};
+export const DANGER_SECTION_ITEM_RANK = {
+  [CLEAR_CELLS_ITEM.key]: 100,
+  [DELETE_ROW_ITEM.key]: 200
+};

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

@@ -0,0 +1 @@
+export const newMenuWidth = 280;

package/dist/es2019/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/es2019/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -0,0 +1,60 @@
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./BackgroundColorItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+const colorPaletteColumns = 7;
+const colorPaletteStyles = {
+  container: "_1rjcu2gc",
+  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
+  colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
+};
+export const BackgroundColorItem = ({
+  testId
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const selectedColor = '#ffffff';
+  const onClick = useCallback(() => {}, []);
+  const colorPreviewStyle = useMemo(() => ({
+    backgroundColor: selectedColor
+  }), [selectedColor]);
+  const paletteOptions = useMemo(() => {
+    return {
+      palette: cellBackgroundColorPalette,
+      paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+      hexToPaletteColor: hexToEditorBackgroundPaletteColor
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(Box, {
+      xcss: colorPaletteStyles.elemAfter
+    }, /*#__PURE__*/React.createElement("div", {
+      style: colorPreviewStyle,
+      className: ax([colorPaletteStyles.colorPreview])
+    }), /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    })),
+    text: formatMessage(messages.backgroundColor)
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: colorPaletteStyles.container
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: colorPaletteColumns,
+    onClick: onClick,
+    selectedColor: selectedColor,
+    paletteOptions: paletteOptions
+  })));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export const ClearCellsItem = ({
+  testId
+}) => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.clearCells, {
+    0: 1
+  }));
+};

package/dist/esm/tablePlugin.js

@@ -46,6 +46,7 @@ import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/an
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
+import { getRowMenuComponents } from './ui/TableMenu/row/getRowMenuComponents';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
@@ -82,6 +83,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) && editorExperiment('platform_editor_controls', 'variant1');
+  if (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(getRowMenuComponents());
+  }
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access

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

@@ -3,9 +3,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
-import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
+import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
+import { RowMenu } from '../TableMenu/row/RowMenu';
+import { newMenuWidth } from '../TableMenu/shared/consts';
 import DragMenu from './DragMenu';
+var rowMenuOffset = dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -32,7 +36,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(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && 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)) {
     return null;
   }
@@ -50,7 +53,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth,
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? newMenuWidth : dragMenuDropdownWidth,
     fitHeight: 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.
@@ -58,9 +61,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: offset,
+    offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, /*#__PURE__*/React.createElement(DragMenu, {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(RowMenu, {
+    api: api
+  }) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

package/dist/esm/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/esm/ui/TableMenu/row/RowMenu.js

@@ -0,0 +1,28 @@
+/* RowMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./RowMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ROW_MENU } from './keys';
+var rowMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+export var 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(ROW_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var surface = rowMenuComponents.find(function (c) {
+    return c.type === ROW_MENU.type;
+  });
+  if (!surface) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: rowMenuContainerStyles.container,
+    testId: "row-handle-menu"
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: surface,
+    components: rowMenuComponents
+  }));
+};