@atlaskit/editor-plugin-table 15.4.22 → 15.4.24

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 15.4.24
+
+### Patch Changes
+
+- [`e51da6f828fe9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e51da6f828fe9) -
+  Exclude Safari due to contenteditable in sticky positioned table header bug
+- Updated dependencies
+
+## 15.4.23
+
+### Patch Changes
+
+- [`21089bb0ca0d2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21089bb0ca0d2) -
+  Only enable new table sticky header if drag and drop flag enabled
+
 ## 15.4.22
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -857,7 +857,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+        isDragAndDropEnabled: isDragAndDropEnabled
       }) : null;
 
       /**

package/dist/cjs/nodeviews/table-node-views.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableView = exports.tableRowView = exports.tableHeaderView = exports.tableCellView = void 0;
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _anchor = require("../pm-plugins/utils/anchor");
+var _stickyHeader = require("../pm-plugins/utils/sticky-header");
 var _table = require("./table");
 var _TableCell = _interopRequireDefault(require("./TableCell"));
 var _TableRow = _interopRequireDefault(require("./TableRow"));
@@ -32,7 +32,8 @@ var tableHeaderView = exports.tableHeaderView = function tableHeaderView(options
 };
 var tableRowView = exports.tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    if ((0, _anchor.isAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if ((0, _stickyHeader.isNativeStickySupported)((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new _TableRowNativeStickyWithFallback.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new _TableRow.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/cjs/pm-plugins/main.js

@@ -76,7 +76,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       }),
       tableRow: (0, _tableNodeViews.tableRowView)({
         eventDispatcher: eventDispatcher,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: (0, _tableNodeViews.tableCellView)({
         eventDispatcher: eventDispatcher,

package/dist/cjs/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNativeStickySupported = exports.isAnchorSupported = void 0;
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _browser = require("@atlaskit/editor-common/browser");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(function () {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+var isNativeStickySupported = exports.isNativeStickySupported = function isNativeStickySupported(isDragAndDropEnabled) {
+  var safariVersion = (0, _browser.getBrowserInfo)().safari_version;
+  var isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

package/dist/cjs/ui/ContentComponent.js

@@ -112,7 +112,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     isContextualMenuOpen: isContextualMenuOpen,
     stickyHeader: stickyHeader,
     tableWrapper: tableWrapperTarget,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled: isDragAndDropEnabled
   }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
     tableNode: tableNode,
     tableRef: tableRef,

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

@@ -20,7 +20,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../pm-plugins/commands");
-var _anchor = require("../../pm-plugins/utils/anchor");
+var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
@@ -51,6 +51,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled = props.isDragAndDropEnabled,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -103,7 +104,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY);
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _anchor.isAnchorSupported)() && targetCellRef.nodeName === 'TH' && parentStickyNative) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && (0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     var anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     var rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';
@@ -116,6 +117,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         positionAnchor: anchorName
       } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+      ,
+      "data-testid": "table-cell-options-anchor-wrapper"
     }, button);
   }
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -10,10 +10,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _anchor = require("../../pm-plugins/utils/anchor");
 var _columnControls = require("../../pm-plugins/utils/column-controls");
 var _nodes = require("../../pm-plugins/utils/nodes");
 var _rowControls = require("../../pm-plugins/utils/row-controls");
+var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
 var _ColumnControls = require("./ColumnControls");
 var _ColumnDropTargets = require("./ColumnDropTargets");
@@ -35,7 +35,8 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     tableWrapperHeight = _ref.tableWrapperHeight,
     api = _ref.api,
-    isChromelessEditor = _ref.isChromelessEditor;
+    isChromelessEditor = _ref.isChromelessEditor,
+    isDragAndDropEnabled = _ref.isDragAndDropEnabled;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
@@ -83,7 +84,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if ((0, _anchor.isAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if ((0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/es2019/nodeviews/TableComponent.js

@@ -816,7 +816,8 @@ class TableComponent extends React.Component {
       },
       tableWrapperHeight: this.state.tableWrapperHeight,
       api: pluginInjectionApi,
-      isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
+      isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+      isDragAndDropEnabled: isDragAndDropEnabled
     }) : null;
 
     /**

package/dist/es2019/nodeviews/table-node-views.js

@@ -1,5 +1,5 @@
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../pm-plugins/utils/sticky-header';
 // TODO: ED-23976 - Clean up
 import { createTableView } from './table';
 import TableCell from './TableCell';
@@ -24,7 +24,8 @@ export const tableHeaderView = options => {
 };
 export const tableRowView = options => {
   return (node, view, getPos) => {
-    if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/es2019/pm-plugins/main.js

@@ -67,7 +67,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       }),
       tableRow: tableRowView({
         eventDispatcher,
-        pluginInjectionApi
+        pluginInjectionApi,
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: tableCellView({
         eventDispatcher,

package/dist/es2019/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,17 @@
+import memorizeOne from 'memoize-one';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export const isAnchorSupported = memorizeOne(() => {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+export const isNativeStickySupported = isDragAndDropEnabled => {
+  const safariVersion = getBrowserInfo().safari_version;
+  const isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

package/dist/es2019/ui/ContentComponent.js

@@ -107,7 +107,8 @@ const ContentComponentInternal = ({
     isContextualMenuOpen: isContextualMenuOpen,
     stickyHeader: stickyHeader,
     tableWrapper: tableWrapperTarget,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled: isDragAndDropEnabled
   }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
     tableNode: tableNode,
     tableRef: tableRef,

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

@@ -18,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleContextualMenu } from '../../pm-plugins/commands';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
 // Ignored via go/ees005
@@ -42,6 +42,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     tableWrapper,
     targetCellPosition,
     isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled,
     intl: {
       formatMessage
     }
@@ -101,7 +102,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     const anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     const rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';
@@ -114,6 +115,8 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         positionAnchor: anchorName
       } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+      ,
+      "data-testid": "table-cell-options-anchor-wrapper"
     }, button);
   }
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -25,7 +25,8 @@ const TableFloatingColumnControls = ({
   getScrollOffset,
   tableWrapperHeight,
   api,
-  isChromelessEditor
+  isChromelessEditor,
+  isDragAndDropEnabled
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
@@ -73,7 +74,7 @@ const TableFloatingColumnControls = ({
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
   }
   let anchorStyles = {};
-  if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/esm/nodeviews/TableComponent.js

@@ -851,7 +851,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+        isDragAndDropEnabled: isDragAndDropEnabled
       }) : null;
 
       /**

package/dist/esm/nodeviews/table-node-views.js

@@ -1,5 +1,5 @@
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../pm-plugins/utils/sticky-header';
 // TODO: ED-23976 - Clean up
 import { createTableView } from './table';
 import TableCell from './TableCell';
@@ -24,7 +24,8 @@ export var tableHeaderView = function tableHeaderView(options) {
 };
 export var tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/esm/pm-plugins/main.js

@@ -69,7 +69,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       }),
       tableRow: tableRowView({
         eventDispatcher: eventDispatcher,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: tableCellView({
         eventDispatcher: eventDispatcher,

package/dist/esm/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,17 @@
+import memorizeOne from 'memoize-one';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var isAnchorSupported = memorizeOne(function () {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+export var isNativeStickySupported = function isNativeStickySupported(isDragAndDropEnabled) {
+  var safariVersion = getBrowserInfo().safari_version;
+  var isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

package/dist/esm/ui/ContentComponent.js

@@ -104,7 +104,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     isContextualMenuOpen: isContextualMenuOpen,
     stickyHeader: stickyHeader,
     tableWrapper: tableWrapperTarget,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled: isDragAndDropEnabled
   }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
     tableNode: tableNode,
     tableRef: tableRef,

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

@@ -18,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleContextualMenu } from '../../pm-plugins/commands';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
 // Ignored via go/ees005
@@ -41,6 +41,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled = props.isDragAndDropEnabled,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -93,7 +94,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     var anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     var rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';
@@ -106,6 +107,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         positionAnchor: anchorName
       } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+      ,
+      "data-testid": "table-cell-options-anchor-wrapper"
     }, button);
   }
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -2,10 +2,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -26,7 +26,8 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     tableWrapperHeight = _ref.tableWrapperHeight,
     api = _ref.api,
-    isChromelessEditor = _ref.isChromelessEditor;
+    isChromelessEditor = _ref.isChromelessEditor,
+    isDragAndDropEnabled = _ref.isDragAndDropEnabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
@@ -74,7 +75,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/types/nodeviews/table-node-views.d.ts

@@ -21,6 +21,7 @@ type TableViewOptions = {
 export declare const tableView: (options: TableViewOptions) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => import("prosemirror-view").NodeView;
 type TableCellViewOptions = {
     eventDispatcher: EventDispatcher;
+    isDragAndDropEnabled?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
 export declare const tableCellView: (options: TableCellViewOptions) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell;

package/dist/types/pm-plugins/utils/sticky-header.d.ts

@@ -0,0 +1,2 @@
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare const isNativeStickySupported: (isDragAndDropEnabled: boolean) => boolean;

package/dist/types/ui/FloatingContextualButton/index.d.ts

@@ -9,6 +9,7 @@ export interface Props {
     editorView: EditorView;
     isCellMenuOpenByKeyboard?: boolean;
     isContextualMenuOpen?: boolean;
+    isDragAndDropEnabled?: boolean;
     isNumberColumnEnabled?: boolean;
     mountPoint?: HTMLElement;
     scrollableElement?: HTMLElement;

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

@@ -17,6 +17,7 @@ interface Props {
     hoveredCell?: CellHoverMeta;
     hoveredRows?: number[];
     isChromelessEditor?: boolean;
+    isDragAndDropEnabled?: boolean;
     isInDanger?: boolean;
     isNumberColumnEnabled?: boolean;
     isResizing?: boolean;
@@ -29,5 +30,5 @@ interface Props {
     tableRef?: HTMLTableElement;
     tableWrapperHeight?: number;
 }
-declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => React.JSX.Element | null;
+declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, isDragAndDropEnabled, }: Props) => React.JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/nodeviews/table-node-views.d.ts

@@ -21,6 +21,7 @@ type TableViewOptions = {
 export declare const tableView: (options: TableViewOptions) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => import("prosemirror-view").NodeView;
 type TableCellViewOptions = {
     eventDispatcher: EventDispatcher;
+    isDragAndDropEnabled?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
 export declare const tableCellView: (options: TableCellViewOptions) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell;

package/dist/types-ts4.5/pm-plugins/utils/sticky-header.d.ts

@@ -0,0 +1,2 @@
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare const isNativeStickySupported: (isDragAndDropEnabled: boolean) => boolean;

package/dist/types-ts4.5/ui/FloatingContextualButton/index.d.ts

@@ -9,6 +9,7 @@ export interface Props {
     editorView: EditorView;
     isCellMenuOpenByKeyboard?: boolean;
     isContextualMenuOpen?: boolean;
+    isDragAndDropEnabled?: boolean;
     isNumberColumnEnabled?: boolean;
     mountPoint?: HTMLElement;
     scrollableElement?: HTMLElement;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts

@@ -17,6 +17,7 @@ interface Props {
     hoveredCell?: CellHoverMeta;
     hoveredRows?: number[];
     isChromelessEditor?: boolean;
+    isDragAndDropEnabled?: boolean;
     isInDanger?: boolean;
     isNumberColumnEnabled?: boolean;
     isResizing?: boolean;
@@ -29,5 +30,5 @@ interface Props {
     tableRef?: HTMLTableElement;
     tableWrapperHeight?: number;
 }
-declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => React.JSX.Element | null;
+declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, isDragAndDropEnabled, }: Props) => React.JSX.Element | null;
 export default TableFloatingColumnControls;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.4.22",
+	"version": "15.4.24",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.5.1",
-		"@atlaskit/button": "^23.6.0",
+		"@atlaskit/button": "^23.7.0",
 		"@atlaskit/custom-steps": "^0.16.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
@@ -58,7 +58,7 @@
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tmp-editor-statsig": "^15.7.0",
-		"@atlaskit/toggle": "^15.1.0",
+		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",

package/dist/cjs/pm-plugins/utils/anchor.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isAnchorSupported = void 0;
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(function () {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/es2019/pm-plugins/utils/anchor.js

@@ -1,7 +0,0 @@
-import memorizeOne from 'memoize-one';
-export const isAnchorSupported = memorizeOne(() => {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/esm/pm-plugins/utils/anchor.js

@@ -1,7 +0,0 @@
-import memorizeOne from 'memoize-one';
-export var isAnchorSupported = memorizeOne(function () {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/types/pm-plugins/utils/anchor.d.ts

@@ -1 +0,0 @@
-export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;

package/dist/types-ts4.5/pm-plugins/utils/anchor.d.ts

@@ -1 +0,0 @@
-export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;