@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

package/dist/es2019/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js

@@ -0,0 +1,97 @@
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getTableMeasurement } from '../../transforms/content-mode';
+import { restoreResizerContainer, runSmartAdjust } from './smart-adjust/run-smart-adjust';
+export const measureTableWithAutoLayout = (tableRef, editorContainerWidth) => {
+  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
+  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+  const prevTableWidth = tableRef.style.width;
+  const prevTableLayout = tableRef.style.tableLayout;
+  const prevColWidths = cols.map(col => col.style.width);
+  const prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(col => col.style.width = '');
+  if (fg('platform_editor_table_fit_to_content_smart_adjust')) {
+    const hadTableSticky = tableRef.classList.contains(TableSharedCssClassName.TABLE_STICKY);
+    const prevTableMarginTop = tableRef.style.marginTop;
+    if (hadTableSticky) {
+      tableRef.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+    }
+    if (prevTableMarginTop) {
+      tableRef.style.marginTop = '';
+    }
+    const stickyRows = Array.from(tableRef.querySelectorAll(`tr.sticky, tr.${TableSharedCssClassName.TABLE_NATIVE_STICKY}`));
+    const prevStickyRowState = stickyRows.map(row => ({
+      row,
+      hadSticky: row.classList.contains('sticky'),
+      hadNative: row.classList.contains(TableSharedCssClassName.TABLE_NATIVE_STICKY),
+      width: row.style.width,
+      top: row.style.top,
+      position: row.style.position,
+      gridTemplateColumns: row.style.gridTemplateColumns
+    }));
+    stickyRows.forEach(row => {
+      row.classList.remove('sticky');
+      row.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+      row.style.width = '';
+      row.style.top = '';
+      row.style.position = '';
+      row.style.gridTemplateColumns = '';
+    });
+    try {
+      return runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidth);
+    } finally {
+      tableRef.style.width = prevTableWidth;
+      tableRef.style.tableLayout = prevTableLayout;
+      cols.forEach((col, i) => col.style.width = prevColWidths[i]);
+      if (hadTableSticky) {
+        tableRef.classList.add(TableSharedCssClassName.TABLE_STICKY);
+      }
+      if (prevTableMarginTop) {
+        tableRef.style.marginTop = prevTableMarginTop;
+      }
+      prevStickyRowState.forEach(state => {
+        if (state.hadSticky) {
+          state.row.classList.add('sticky');
+        }
+        if (state.hadNative) {
+          state.row.classList.add(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+        }
+        if (state.width) {
+          state.row.style.width = state.width;
+        }
+        if (state.top) {
+          state.row.style.top = state.top;
+        }
+        if (state.position) {
+          state.row.style.position = state.position;
+        }
+        if (state.gridTemplateColumns) {
+          state.row.style.gridTemplateColumns = state.gridTemplateColumns;
+        }
+      });
+      restoreResizerContainer(resizerContainer);
+      if (resizerItem) {
+        resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+      }
+    }
+  }
+  if (resizerContainer) {
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
+    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
+  }
+  if (resizerItem) {
+    resizerItem.style.width = 'max-content';
+  }
+  const measurement = getTableMeasurement(tableRef);
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach((col, i) => col.style.width = prevColWidths[i]);
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};

package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/constants.js

@@ -0,0 +1,4 @@
+/** Each column's max width is `MAX × (usableWidth / numCols)`. */
+export const EVEN_SHARE_RATIO = {
+  MAX: 2
+};

package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js

@@ -0,0 +1,63 @@
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { EVEN_SHARE_RATIO } from './constants';
+export const sumWidths = widths => widths.reduce((sum, width) => sum + width, 0);
+
+// 2px absorbs sub-pixel rounding in `getRenderedColgroupColumnWidths`.
+const SUB_PIXEL_ROUNDING_ALLOWANCE = 2;
+
+/**
+ * Clamps each desired width to `[tableCellMinWidth, MAX × evenShare]`. Greedy
+ * columns (paragraphs) hit the ceiling and wrap; small columns stay at their
+ * natural width. Leftover canvas budget grows ceiling-hitters up to their
+ * desired; overflow reclaims from ceiling-hitters only.
+ */
+export const distributeByEvenShareRatio = (desiredWidths, editorContainerWidth) => {
+  if (desiredWidths.length === 0 || !isFinite(editorContainerWidth) || editorContainerWidth <= 0) {
+    return desiredWidths;
+  }
+  const usableWidth = Math.max(editorContainerWidth - akEditorGutterPaddingDynamic() * 2, tableCellMinWidth * desiredWidths.length);
+  const evenShare = usableWidth / desiredWidths.length;
+  const ceiling = EVEN_SHARE_RATIO.MAX * evenShare;
+  const isCompactColumn = width => width <= ceiling;
+  const desiredCeil = desiredWidths.map(desired => Math.max(tableCellMinWidth, Math.ceil(desired) + SUB_PIXEL_ROUNDING_ALLOWANCE));
+  const capped = desiredCeil.map(desired => isCompactColumn(desired) ? desired : Math.min(ceiling, desired));
+  const sum = sumWidths(capped);
+
+  // Underflow: grow non-protected ceiling-hitters into the leftover, up to their desired.
+  if (sum < usableWidth) {
+    const leftover = usableWidth - sum;
+    const growthHeadroom = capped.map((width, index) => !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(desiredCeil[index] - width, 0) : 0);
+    const totalHeadroom = sumWidths(growthHeadroom);
+    if (totalHeadroom > 0) {
+      const totalGrowth = Math.min(leftover, totalHeadroom);
+      return capped.map((width, index) => {
+        const headroom = growthHeadroom[index];
+        if (headroom <= 0) {
+          return width;
+        }
+        return width + headroom / totalHeadroom * totalGrowth;
+      });
+    }
+    return capped;
+  }
+  if (sum === usableWidth) {
+    return capped;
+  }
+
+  // Overflow: reclaim from non-protected ceiling-hitters only.
+  const overage = sum - usableWidth;
+  const slacks = capped.map((width, index) => !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(width - tableCellMinWidth, 0) : 0);
+  const totalSlack = sumWidths(slacks);
+  if (totalSlack <= 0) {
+    return capped;
+  }
+  return capped.map((width, index) => {
+    const slack = slacks[index];
+    if (slack <= 0) {
+      return width;
+    }
+    const share = slack / totalSlack * Math.min(overage, totalSlack);
+    return Math.max(width - share, tableCellMinWidth);
+  });
+};

package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js

@@ -0,0 +1,47 @@
+import { getTableMeasurement } from '../../../transforms/content-mode';
+import { distributeByEvenShareRatio, sumWidths } from './distribute-column-widths';
+const measureWithIntrinsicWidth = (tableRef, resizerContainer, resizerItem) => {
+  if (resizerContainer) {
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
+    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
+  }
+  if (resizerItem) {
+    resizerItem.style.width = 'max-content';
+  }
+  const prevTableWidth = tableRef.style.width;
+  const prevTableMaxWidth = tableRef.style.maxWidth;
+  const prevTableMinWidth = tableRef.style.minWidth;
+  tableRef.style.setProperty('width', 'max-content', 'important');
+  tableRef.style.setProperty('max-width', 'none', 'important');
+  tableRef.style.setProperty('min-width', '0', 'important');
+  try {
+    return getTableMeasurement(tableRef);
+  } finally {
+    tableRef.style.width = prevTableWidth;
+    tableRef.style.maxWidth = prevTableMaxWidth;
+    tableRef.style.minWidth = prevTableMinWidth;
+  }
+};
+export const restoreResizerContainer = resizerContainer => {
+  if (!resizerContainer) {
+    return;
+  }
+  resizerContainer.style.width = 'var(--ak-editor-table-width)';
+  resizerContainer.style.removeProperty('--ak-editor-table-width');
+};
+
+/**
+ * Smart-adjust: measure unconstrained max-content per column, then clamp via
+ * `distributeByEvenShareRatio`.
+ */
+export const runSmartAdjust = (tableRef, resizerContainer, resizerItem, editorContainerWidthFromApi) => {
+  const preferredMeasurement = measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem);
+  const desiredWidths = preferredMeasurement.colWidths;
+  const editorContainerWidth = editorContainerWidthFromApi !== null && editorContainerWidthFromApi !== void 0 ? editorContainerWidthFromApi : sumWidths(desiredWidths);
+  const colWidths = distributeByEvenShareRatio(desiredWidths, editorContainerWidth);
+  return {
+    ...preferredMeasurement,
+    colWidths,
+    tableWidth: sumWidths(colWidths)
+  };
+};

package/dist/es2019/tablePlugin.js

@@ -140,6 +140,7 @@ const tablePlugin = ({
         insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
         tableWrapperTarget: tablePluginState.tableWrapperTarget,
         isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
+        activeTableMenu: tablePluginState.activeTableMenu,
         stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,

package/dist/es2019/ui/ContentComponent.js

@@ -93,6 +93,7 @@ const ContentComponentInternal = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+    api: api,
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,
     tableNode: tableNode,
@@ -128,7 +129,6 @@ const ContentComponentInternal = ({
     editorView: editorView,
     mountPoint: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
-    targetCellPosition: targetCellPosition,
     isOpen: Boolean(isContextualMenuOpen) && !isResizing,
     pluginConfig: pluginConfig,
     editorAnalyticsAPI: editorAnalyticsAPI,

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

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { focusToContextMenuTrigger } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -17,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { toggleContextualMenu } from '../../pm-plugins/commands';
+import { toggleActiveTableMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
@@ -34,6 +35,7 @@ const anchorStyles = css({
 });
 const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const {
+    api,
     editorView,
     isContextualMenuOpen,
     mountPoint,
@@ -46,14 +48,25 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       formatMessage
     }
   } = props; //  : Props & WrappedComponentProps
-
+  const {
+    activeTableMenu
+  } = useSharedPluginStateWithSelector(api, ['table'], states => {
+    var _states$tableState;
+    return {
+      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+    };
+  });
+  const isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isContextualMenuOpen;
   const handleClick = () => {
     const {
       state,
       dispatch
     } = editorView;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      toggleContextualMenu()(state, dispatch);
+      toggleActiveTableMenu({
+        type: 'cell',
+        openedBy: 'mouse'
+      })(state, dispatch);
       return;
     }
 
@@ -69,15 +82,22 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const domAtPos = editorView.domAtPos.bind(editorView);
   const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
   useEffect(() => {
-    if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+    if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       const {
         state,
         dispatch
       } = editorView;
       // open the menu when the keyboard shortcut is pressed
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        toggleActiveTableMenu({
+          type: 'cell',
+          openedBy: 'keyboard'
+        })(state, dispatch);
+        return;
+      }
       toggleContextualMenu()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -87,12 +107,12 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     tableFloatingCellButtonStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
+    isCellMenuOpen && tableFloatingCellButtonSelectedStyles()]
   }, jsx(ToolbarButton
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
-    selected: isContextualMenuOpen,
+    selected: isCellMenuOpen,
     title: labelCellOptions,
     keymap: focusToContextMenuTrigger,
     onClick: handleClick,
@@ -102,7 +122,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       size: "small"
     }),
     "aria-label": labelCellOptions,
-    "aria-expanded": isContextualMenuOpen
+    "aria-expanded": isCellMenuOpen
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const parentStickyNative = targetCellRef.parentElement && (fg('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY));
@@ -157,7 +177,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       targetCellPosition: targetCellPosition,
       targetCellRef: targetCellRef,
       mountTo: tableWrapper,
-      isContextualMenuOpen: isContextualMenuOpen
+      isContextualMenuOpen: isCellMenuOpen
     }, button);
   }
   return jsx(Popup, {

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

@@ -1,100 +1,83 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { bind } from 'bind-event-listener';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import React, { useCallback, useContext, useRef } from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
-import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { closeActiveTableMenu, setFocusToCellMenu } from '../../pm-plugins/commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
+import { tablePopupMenuFitHeight } from '../consts';
 import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
 import { TableMenu } from '../TableMenu/shared/TableMenu';
+const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
+const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
 export const CellMenuPopup = ({
   api,
+  boundariesElement,
   editorView,
-  isCellMenuOpenByKeyboard,
-  isOpen,
-  targetCellRef
+  mountPoint,
+  scrollableElement,
+  targetCellRef,
+  zIndex
 }) => {
-  const tableMenuRef = useRef(null);
-  const {
-    currentUserIntent
-  } = useSharedPluginStateWithSelector(api, ['userIntent'], states => {
-    var _states$userIntentSta;
-    return {
-      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
-    };
-  });
+  const popupContentRef = useRef(null);
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const handlePopupRef = useCallback(el => {
+    popupContentRef.current = el;
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
+  }, [setOutsideClickTargetRef]);
   const closeCellMenu = useCallback(() => {
     const {
-      state,
-      dispatch,
-      dom
-    } = editorView;
-    toggleContextualMenu()(state, dispatch);
+      isCellMenuOpenByKeyboard
+    } = getPluginState(editorView.state);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
     if (isCellMenuOpenByKeyboard) {
-      setFocusToCellMenu(false)(state, dispatch);
-      dom.focus();
+      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, isCellMenuOpenByKeyboard]);
-  useEffect(() => {
-    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
-      return;
+  }, [editorView]);
+  const isEventInsideCellMenu = useCallback(event => {
+    var _popupContentRef$curr;
+    const target = event.target;
+    if (!(target instanceof Node)) {
+      return false;
     }
-    closeCellMenu();
-  }, [closeCellMenu, currentUserIntent, isOpen]);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
+    if ((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target)) {
+      return true;
     }
-    if (!(targetCellRef instanceof HTMLElement)) {
+    return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
+  }, []);
+  const handleCellMenuClickOutside = useCallback(event => {
+    if (isEventInsideCellMenu(event)) {
       return;
     }
-    const ownerDocument = targetCellRef.ownerDocument;
-    const handlePointerDown = event => {
-      var _tableMenuRef$current;
-      const target = event.target;
-      if (!(target instanceof Node)) {
-        return;
-      }
-      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
-        return;
-      }
-      const cellMenuButton = ownerDocument.querySelector(`.${ClassName.CONTEXTUAL_MENU_BUTTON}`);
-      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
-        return;
-      }
-      closeCellMenu();
-    };
-    const handleKeyDown = event => {
-      if (event.key === 'Escape') {
-        closeCellMenu();
-      }
-    };
-    const unbindPointerDown = bind(ownerDocument, {
-      type: 'pointerdown',
-      listener: handlePointerDown,
-      options: {
-        capture: true
-      }
-    });
-    const unbindKeyDown = bind(ownerDocument, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return () => {
-      unbindPointerDown();
-      unbindKeyDown();
-    };
-  }, [closeCellMenu, isOpen, targetCellRef]);
-  return /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    closeCellMenu();
+  }, [closeCellMenu, isEventInsideCellMenu]);
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: "right",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitHeight: tablePopupMenuFitHeight,
+    fitWidth: TABLE_MENU_WIDTH,
+    zIndex: zIndex,
+    forcePlacement: true
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    offset: [-7, 0],
+    stick: true,
+    handleClickOutside: handleCellMenuClickOutside,
+    handleEscapeKeydown: closeCellMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
     userIntent: "tableContextualMenuPopupOpen"
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: tableMenuRef
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
     editorView: editorView,
     surface: CELL_MENU
-  })));
+  }))));
 };

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

@@ -4,6 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -11,7 +12,6 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
-import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
 import { CellMenuPopup } from './CellMenuPopup';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -32,6 +32,15 @@ const FloatingContextualMenu = ({
   api,
   isDragMenuOpen
 }) => {
+  const {
+    activeTableMenu
+  } = useSharedPluginStateWithSelector(api, ['table'], states => {
+    var _states$tableState;
+    return {
+      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+    };
+  });
+  const isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isOpen;
   if (!editorView) {
     return null;
   }
@@ -40,7 +49,7 @@ const FloatingContextualMenu = ({
   const {
     targetCellPosition
   } = getPluginState(editorView.state);
-  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  if (!isCellMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   const {
@@ -59,6 +68,20 @@ const FloatingContextualMenu = ({
     return null;
   }
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    return jsx(CellMenuPopup, {
+      api: api,
+      boundariesElement: boundariesElement,
+      editorView: editorView,
+      mountPoint: mountPoint,
+      scrollableElement: scrollableElement
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      ,
+      targetCellRef: targetCellRef,
+      zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
+    });
+  }
   return jsx(Popup, {
     alignX: "right",
     alignY: "top"
@@ -70,7 +93,7 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : contextualMenuDropdownWidthDnD
+    fitWidth: contextualMenuDropdownWidthDnD
     // 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.
     ,
@@ -80,15 +103,7 @@ const FloatingContextualMenu = ({
     ,
     offset: [-7, 0],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? jsx(CellMenuPopup, {
-    api: api,
-    editorView: editorView,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-    isOpen: isOpen,
-    targetCellRef: targetCellRef
-  }) :
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("div", {
+  }, jsx("div", {
     css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -35,11 +36,24 @@ const FloatingDragMenu = ({
   tableWrapper
 }) => {
   var _getEditorFeatureFlag;
-  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  const {
+    activeTableMenu
+  } = useSharedPluginStateWithSelector(api, ['table'], states => {
+    var _states$tableState;
+    return {
+      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+    };
+  });
+  const isActiveTableMenuDragMenu = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+  const hasActiveTableMenuState = activeTableMenu !== undefined;
+  const isDragMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu : isOpen;
+  const dragMenuDirection = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.type : undefined : direction;
+  const dragMenuIndex = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.index : undefined : index;
+  if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   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 targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
@@ -48,8 +62,8 @@ const FloatingDragMenu = ({
   } = (_getEditorFeatureFlag = getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) !== null && _getEditorFeatureFlag !== void 0 ? _getEditorFeatureFlag : {};
   const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'right' : undefined,
-    alignY: direction === 'row' ? 'start' : undefined
+    alignX: dragMenuDirection === 'row' ? 'right' : undefined,
+    alignY: dragMenuDirection === 'row' ? 'start' : undefined
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     ,
@@ -73,13 +87,13 @@ const FloatingDragMenu = ({
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
     editorView: editorView,
-    surface: direction === 'row' ? ROW_MENU : COLUMN_MENU
+    surface: dragMenuDirection === 'row' ? ROW_MENU : COLUMN_MENU
   })) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
-    isOpen: isOpen,
+    isOpen: isDragMenuOpen,
     tableNode: tableNode,
-    direction: direction,
-    index: index,
+    direction: dragMenuDirection,
+    index: dragMenuIndex,
     target: targetHandleRef || undefined,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,