@atlaskit/editor-plugin-table 38.0.0 → 38.0.1

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

@@ -6,15 +6,16 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
 import { isFullRowOrColumnSelected } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
+import { getTableZIndexes } from '../sticky-header-z-index';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
 // Ignored via go/ees005
@@ -128,11 +129,14 @@ export class FloatingInsertButton extends React.Component {
     if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
       verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
     }
-    // Fixed the 'add column button' not visible issue when sticky header is enabled
-    // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
-    // Only when inserting a column, otherwise set to undefined
-    // Need to set z-index in the Popup, set z-index in the <DragAndDropInsertButton /> will not work
-    const zIndex = expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+    // Column inserts sit above the header; row inserts scroll behind it.
+    // Set the layer on the Popup because its children share its stacking context.
+    let zIndex;
+    if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
+      zIndex = getTableZIndexes().belowHeader;
+    } else if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
+      zIndex = getTableZIndexes().headerButton;
+    }
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,
       mountTo: tableContainerWrapper || mountPoint,

package/dist/es2019/ui/common-styles.js

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, tableMarginTop, tableSharedStyle, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
-import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
+import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
 import { akEditorTableContainerBg } from '@atlaskit/editor-shared-styles/consts';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
@@ -17,8 +17,9 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
 import { TableCssClassName as ClassName } from '../types';
-import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, columnControlsDecorationHeight, dragRowControlsWidth, nativeStickyHeaderZIndex, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, stickyRowZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableColumnControlsHeight, tableControlsSpacing, tableHeaderCellBackgroundColor, tableHeaderCellSelectedColor, tableInsertColumnButtonSize, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, dragRowControlsWidth, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableColumnControlsHeight, tableControlsSpacing, tableHeaderCellBackgroundColor, tableHeaderCellSelectedColor, tableInsertColumnButtonSize, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 import { roundedTableOverrides } from './rounded-table-styles';
+import { getTableZIndexes } from './sticky-header-z-index';
 import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
@@ -249,6 +250,10 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 	${rangeSelectionStylesForFakeBorders};
 	${viewModeSortStyles()};
 
+	${isExperimentEnabled('platform_editor_sticky_headers_zindex') ? `.${ClassName.TABLE_CONTAINER} {
+			--ak-editor-table-resize-handle-z-index: ${getTableZIndexes().resizeHandle};
+		}` : ''}
+
 	${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `
 		.ak-editor-panel:not([data-panel-type="custom"]) .${ClassName.TABLE_CONTAINER} {
 			${akEditorTableContainerBg}: ${"var(--ds-background-accent-blue-subtlest, #E9F2FE)"};
@@ -383,7 +388,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		display: grid;
 
 		/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */
-		z-index: ${akEditorTableCellOnStickyHeaderZIndex - 5};
+		z-index: ${getTableZIndexes().header};
 
 		overflow-y: visible;
 		overflow-x: hidden;
@@ -493,13 +498,13 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 	tr.${ClassName.NATIVE_STICKY} {
 		position: sticky;
 		top: ${tableMarginTop}px;
-		z-index: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : `calc(${akEditorTableCellOnStickyHeaderZIndex} - 5)`};
+		z-index: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : `calc(${getTableZIndexes().header})`};
 		box-shadow:
 			inset -1px 1px ${tableBorderColor},
 			inset 1px -1px ${tableBorderColor};
 
 		&.${ClassName.NATIVE_STICKY_ACTIVE} {
-			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `z-index: ${nativeStickyHeaderZIndex};` : ''}
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `z-index: ${getTableZIndexes().header};` : ''}
 			box-shadow:
 				inset -1px 1px ${tableBorderColor},
 				inset 1px -1px ${tableBorderColor},
@@ -532,7 +537,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		margin-bottom: -${tableMarginTop}px;
 		position: sticky;
 		border-top: ${tableMarginTop}px solid transparent;
-		z-index: ${stickyRowZIndex};
+		z-index: ${getTableZIndexes().mask};
 	}
 
 	.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY_ACTIVE})::before {
@@ -561,7 +566,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		> div
 		> .${ClassName.DRAG_ROW_CONTROLS} {
 		top: ${tableColumnControlsHeight}px;
-		z-index: ${aboveNativeStickyHeaderZIndex};
+		z-index: ${getTableZIndexes().aboveHeader};
 	}
 
 	.${ClassName.TABLE_CONTAINER}:has(> .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW})
@@ -573,7 +578,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
 		> div
 		> .${ClassName.DRAG_ROW_CONTROLS} {
-		z-index: ${belowNativeStickyHeaderZIndex};
+		z-index: ${getTableZIndexes().belowHeader};
 	}
 
 	/** Corrects position of numbered column when sticky header top mask is present */
@@ -824,7 +829,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 			height: ${tableColumnControlsHeight}px;
 			position: absolute;
 			top: ${"var(--ds-space-negative-150, -12px)"};
-			z-index: ${resizeHandlerZIndex};
+			z-index: ${getTableZIndexes().resizeHandle};
 		}
 
 		.${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
@@ -1145,7 +1150,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 				left: -1px;
 				top: -1px;
 				bottom: 0;
-				z-index: ${akEditorUnitZIndex * 100};
+				z-index: ${getTableZIndexes().dangerOverlay};
 				display: inline-block;
 				pointer-events: none;
 				background: ${tableCellDeleteColor};
@@ -1170,13 +1175,13 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 			}
 			&.${ClassName.HOVERED_CELL_IN_DANGER}::after {
 				${tableBorderStyles()};
-				z-index: ${akEditorUnitZIndex * 100};
+				z-index: ${getTableZIndexes().dangerOverlay};
 				background: ${tableCellDeleteColor};
 			}
 
 			&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
 				${tableBorderStyles()};
-				z-index: ${akEditorUnitZIndex * 100};
+				z-index: ${getTableZIndexes().dangerOverlay};
 				background: ${tableCellDeleteColor};
 			}
 		}
@@ -1220,7 +1225,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		position: fixed;
 		position-area: top center;
 		position-visibility: anchors-visible;
-		z-index: ${nativeStickyHeaderZIndex + 1};
+		z-index: ${getTableZIndexes().aboveHeader};
 		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? isExperimentEnabled('platform_editor_table_q4_patch_8') ? `
 		/* Transparent bottom 1px so the sticky header row's top border stays visible. */
 		padding-bottom: 1px;
@@ -1241,7 +1246,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		width: ${akEditorTableNumberColumnWidth + dragRowControlsWidth}px;
 		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop}px;
 		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
-		z-index: ${nativeStickyHeaderZIndex - 1};
+		z-index: ${getTableZIndexes().belowHeader};
 	}
 
 	/** Mask for numbered column content to the left of the header row */
@@ -1318,8 +1323,8 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 
 	.${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 		position: fixed;
-		/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
-		z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
+		/* Keep column controls above the sticky header in both experiment cohorts. */
+		z-index: ${getTableZIndexes().aboveHeader};
 	}
 
 	${expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') ? `.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}:has(tr.sticky) .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {

package/dist/es2019/ui/rounded-table-styles.js

@@ -7,7 +7,8 @@ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorTableNumber
 import { akEditorTableContainerBg } from '@atlaskit/editor-shared-styles/consts';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
-import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
+import { tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
+import { getTableZIndexes } from './sticky-header-z-index';
 const roundedTableCellCornerStyles = () => css`
 	.${ClassName.TABLE_NODE_WRAPPER} > table {
 		/* Round table corner cells (including merged cells that span to the edge)
@@ -464,7 +465,7 @@ const roundedTableStickyHeaderCornerMaskStyles = () => css`
 		margin-bottom: -12px;
 		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		pointer-events: none;
-		z-index: ${nativeStickyHeaderZIndex};
+		z-index: ${getTableZIndexes().header};
 	}
 
 	.${ClassName.TABLE_CONTAINER}[data-number-column='true']

package/dist/es2019/ui/sticky-header-z-index.js

@@ -0,0 +1,29 @@
+import { akEditorTableCellOnStickyHeaderZIndex, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, nativeStickyHeaderZIndex, resizeHandlerZIndex, stickyRowZIndex } from './consts';
+// Keep table content below its sticky masks and header, and the entire table chrome
+// below block controls (100) and Object Sidebar controls (300).
+export const getTableZIndexes = () => {
+  if (isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
+    const headerZIndex = 90;
+    const tableLayerGap = 10;
+    return {
+      header: headerZIndex,
+      aboveHeader: headerZIndex + akEditorUnitZIndex,
+      belowHeader: headerZIndex - akEditorUnitZIndex,
+      headerButton: headerZIndex + akEditorUnitZIndex * 2,
+      mask: headerZIndex - akEditorUnitZIndex * 2,
+      resizeHandle: headerZIndex - tableLayerGap,
+      dangerOverlay: headerZIndex - tableLayerGap * 2
+    };
+  }
+  return {
+    header: nativeStickyHeaderZIndex,
+    aboveHeader: aboveNativeStickyHeaderZIndex,
+    belowHeader: belowNativeStickyHeaderZIndex,
+    headerButton: akEditorTableCellOnStickyHeaderZIndex,
+    mask: stickyRowZIndex,
+    resizeHandle: resizeHandlerZIndex,
+    dangerOverlay: 100
+  };
+};

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

@@ -5,7 +5,8 @@ import { tableCellBorderWidth } from '@atlaskit/editor-common/styles';
 import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { getTableZIndexes } from './sticky-header-z-index';
 const InsertLine = cssString => css`
 	.${ClassName.CONTROLS_INSERT_LINE} {
 		background: ${tableBorderSelectedColor};
@@ -421,7 +422,7 @@ export const columnControlsDecoration = () => {
 				&.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
 					background-color: ${tableToolbarDeleteColor};
 					border-color: ${tableBorderDeleteColor};
-					z-index: ${akEditorUnitZIndex * 100};
+					z-index: ${getTableZIndexes().dangerOverlay};
 				}
 			}
 		}
@@ -456,7 +457,7 @@ export const columnControlsDecoration = () => {
 					border-color: ${tableBorderDeleteColor};
 					border-left: ${tableCellBorderWidth}px solid ${tableBorderDeleteColor};
 					left: -${tableCellBorderWidth}px;
-					z-index: ${akEditorUnitZIndex * 100};
+					z-index: ${getTableZIndexes().dangerOverlay};
 				}
 			}
 		}
@@ -607,7 +608,7 @@ export const resizeHandle = () => css`
 			top: 0;
 			right: -${resizeHandlerAreaWidth / 2}px;
 			cursor: col-resize;
-			z-index: ${resizeHandlerZIndex};
+			z-index: ${getTableZIndexes().resizeHandle};
 		}
 
 		tr
@@ -623,7 +624,7 @@ export const resizeHandle = () => css`
 			top: 0;
 			right: 0;
 			cursor: col-resize;
-			z-index: ${resizeHandlerZIndex};
+			z-index: ${getTableZIndexes().resizeHandle};
 		}
 
 		${resizeLineStyles()}

package/dist/esm/ui/FloatingContextualButton/FixedButton.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import rafSchedule from 'raf-schd';
-import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../../types';
 import { insertColumnButtonOffset } from '../common-styles';
+import { getTableZIndexes } from '../sticky-header-z-index';
 var BUTTON_WIDTH = 20;
 export var calcLeftPos = function calcLeftPos(_ref) {
   var buttonWidth = _ref.buttonWidth,
@@ -129,7 +129,7 @@ export var FixedButton = function FixedButton(_ref2) {
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: fixedButtonTop + stickyHeader.padding + offset * 2,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      zIndex: akEditorTableCellOnStickyHeaderZIndex,
+      zIndex: getTableZIndexes().headerButton,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: left,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -24,7 +24,7 @@ import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-f
 import { getColumnDeleteButtonParams, getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { getRowDeleteButtonParams, getRowHeights } from '../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../types';
-import { stickyRowZIndex } from '../consts';
+import { getTableZIndexes } from '../sticky-header-z-index';
 import DeleteButton from './DeleteButton';
 import getPopupOptions from './getPopUpOptions';
 function getSelectionType(selection) {
@@ -219,7 +219,7 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
               // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-              zIndex: stickyRowZIndex,
+              zIndex: getTableZIndexes().mask,
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (
               // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

@@ -13,15 +13,16 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
 import { isFullRowOrColumnSelected } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
+import { getTableZIndexes } from '../sticky-header-z-index';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
 // Ignored via go/ees005
@@ -136,11 +137,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
         verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
       }
-      // Fixed the 'add column button' not visible issue when sticky header is enabled
-      // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
-      // Only when inserting a column, otherwise set to undefined
-      // Need to set z-index in the Popup, set z-index in the <DragAndDropInsertButton /> will not work
-      var zIndex = expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+      // Column inserts sit above the header; row inserts scroll behind it.
+      // Set the layer on the Popup because its children share its stacking context.
+      var zIndex;
+      if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
+        zIndex = getTableZIndexes().belowHeader;
+      } else if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
+        zIndex = getTableZIndexes().headerButton;
+      }
       return /*#__PURE__*/React.createElement(Popup, _extends({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,