@atlaskit/editor-plugin-table 24.4.16 → 24.4.18

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 24.4.18
+
+### Patch Changes
+
+- [`08b7535d56701`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08b7535d56701) -
+  Disable sticky headers for single-row tables and delay sticky corner masks until the native header
+  is active behind the table Q4 patch 4 experiment
+- [`b5f13b4e19c45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5f13b4e19c45) -
+  HOT-304844 Fixed table flicker issue when table is inside layout and selection moves in/out of
+  table.
+- Updated dependencies
+
+## 24.4.17
+
+### Patch Changes
+
+- [`161922d5b8cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/161922d5b8cee) -
+  Fix editor tooltips affected by inline top-layer rendering. Table cell menu tooltips are no longer
+  constrained by the button background selector, and layout column drag handles now own their
+  wrapper layout without flattening the tooltip's visual surface.
+- Updated dependencies
+
 ## 24.4.16
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableRow.js

@@ -600,15 +600,29 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         if (isCurrentTableSelected) {
           this.colControlsOffset = _consts.tableControlsSpacing;
 
-          // move table a little out of the way
-          // to provide spacing for table controls
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.paddingLeft = '11px';
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_table_flicker_issue')) {
+            // move table a little out of the way
+            // to provide spacing for table controls
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.paddingLeft = '11px';
+              tableContentWrapper.style.marginLeft = '-11px';
+            }
           }
         } else {
           this.colControlsOffset = 0;
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.removeProperty('padding-left');
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_table_flicker_issue')) {
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.removeProperty('padding-left');
+              tableContentWrapper.style.removeProperty('margin-left');
+            }
           }
         }
       }

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -82,6 +82,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     (0, _defineProperty2.default)(_this, "top", 0);
     (0, _defineProperty2.default)(_this, "hasScrolledSinceLoad", false);
     (0, _defineProperty2.default)(_this, "disableNativeSticky", false);
+    (0, _defineProperty2.default)(_this, "isSingleRowTable", false);
     /**
      * Methods
      */
@@ -109,6 +110,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       }
     });
     _this.isHeaderRow = (0, _nodes.supportedHeaderRow)(node);
+    if (_this.isHeaderRow && (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+      _this.isSingleRowTable = _this.checkIsSingleRowTable();
+    }
     _this.isLegacySticky = false;
     var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
       pluginConfig = _getPluginState.pluginConfig;
@@ -187,6 +191,10 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function update(node) {
+      if (this.isHeaderRow && (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+        this.updateSingleRowTableStickyHeaderState();
+      }
+
       // do nothing if nodes were identical
       if (node === this.node) {
         return true;
@@ -297,6 +305,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
            *  be cleaned up.
            */
           entries.forEach(function (entry) {
+            if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this3.updateSingleRowTableStickyHeaderState()) {
+              return;
+            }
             var tableWrapper = _this3.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
             if (tableWrapper && tableWrapper instanceof HTMLElement && !(0, _dom2.areAllRectsZero)(entry)) {
               if (entry.isIntersecting) {
@@ -391,6 +402,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this4.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           // Only apply classes if page has scrolled since load
           if (!_this4.hasScrolledSinceLoad) {
             _this4.overflowObserverEntries = entries;
@@ -441,6 +455,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
+          if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this5.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           var tableContainer = _this5.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
           if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) && !_this5.disableNativeSticky) {
             _this5.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
@@ -579,6 +596,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       var _this7 = this;
       this.nodeVisibilityObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
+          if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this7.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           if (!_this7.isNativeSticky) {
             return;
           }
@@ -671,6 +691,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "refreshLegacyStickyState",
     value: function refreshLegacyStickyState() {
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+        return;
+      }
       var tree = (0, _dom2.getTree)(this.dom);
       if (!tree) {
         return;
@@ -822,15 +845,27 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         if (isCurrentTableSelected) {
           this.colControlsOffset = _consts.tableControlsSpacing;
 
-          // move table a little out of the way
-          // to provide spacing for table controls
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.paddingLeft = '11px';
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_table_flicker_issue')) {
+            // move table a little out of the way
+            // to provide spacing for table controls
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.paddingLeft = '11px';
+            }
           }
         } else {
           this.colControlsOffset = 0;
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.removeProperty('padding-left');
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_table_flicker_issue')) {
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.removeProperty('padding-left');
+            }
           }
         }
       }
@@ -868,11 +903,75 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
       }
     }
+  }, {
+    key: "checkIsSingleRowTable",
+    value: function checkIsSingleRowTable() {
+      var _this1 = this;
+      var pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return false;
+      }
+      try {
+        var _findParentNodeCloses3;
+        var $tableRowPos = this.view.state.doc.resolve(pos);
+        var tableNode = (_findParentNodeCloses3 = (0, _utils.findParentNodeClosestToPos)($tableRowPos, function (node) {
+          return node.type === _this1.view.state.schema.nodes.table;
+        })) === null || _findParentNodeCloses3 === void 0 ? void 0 : _findParentNodeCloses3.node;
+        return (tableNode === null || tableNode === void 0 ? void 0 : tableNode.childCount) === 1;
+      } catch (_unused3) {
+        // getPos can return stale positions during AI streaming. Preserve the original sticky
+        // header behaviour when the containing table cannot be determined.
+        return false;
+      }
+    }
+  }, {
+    key: "updateSingleRowTableStickyHeaderState",
+    value: function updateSingleRowTableStickyHeaderState() {
+      var wasSingleRowTable = this.isSingleRowTable;
+      this.isSingleRowTable = this.checkIsSingleRowTable();
+      if (this.isSingleRowTable) {
+        this.removeSingleRowTableStickyHeaderState();
+      } else if (wasSingleRowTable) {
+        this.refireNativeStickyObservers();
+      }
+      return this.isSingleRowTable;
+    }
+  }, {
+    key: "removeSingleRowTableStickyHeaderState",
+    value: function removeSingleRowTableStickyHeaderState() {
+      this.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+      this.isNativeSticky = false;
+      var tableWrapper = this.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
+      tableWrapper === null || tableWrapper === void 0 || tableWrapper.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+      var tableContainer = this.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
+      if (tableContainer instanceof HTMLElement) {
+        delete tableContainer.dataset.tableHeaderIsStuck;
+      }
+      var tree = (0, _dom2.getTree)(this.dom);
+      if (tree) {
+        this.makeRowHeaderNotLegacySticky(tree.table);
+      }
+    }
+  }, {
+    key: "refireNativeStickyObservers",
+    value: function refireNativeStickyObservers() {
+      var _this$stickyStateObse2, _this$stickyStateObse3;
+      var table = this.dom.closest('table');
+      if (table) {
+        var _this$overflowObserve2, _this$overflowObserve3, _this$nodeVisibilityO3, _this$nodeVisibilityO4;
+        (_this$overflowObserve2 = this.overflowObserver) === null || _this$overflowObserve2 === void 0 || _this$overflowObserve2.unobserve(table);
+        (_this$overflowObserve3 = this.overflowObserver) === null || _this$overflowObserve3 === void 0 || _this$overflowObserve3.observe(table);
+        (_this$nodeVisibilityO3 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO3 === void 0 || _this$nodeVisibilityO3.unobserve(table);
+        (_this$nodeVisibilityO4 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO4 === void 0 || _this$nodeVisibilityO4.observe(table);
+      }
+      (_this$stickyStateObse2 = this.stickyStateObserver) === null || _this$stickyStateObse2 === void 0 || _this$stickyStateObse2.unobserve(this.dom);
+      (_this$stickyStateObse3 = this.stickyStateObserver) === null || _this$stickyStateObse3 === void 0 || _this$stickyStateObse3.observe(this.dom);
+    }
   }, {
     key: "makeHeaderRowLegacySticky",
     value: function makeHeaderRowLegacySticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this1 = this;
+        _this10 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isLegacySticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -911,7 +1010,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this1.refireIntersectionObservers();
+          _this10.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

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

@@ -5,11 +5,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../consts");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+// Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
+var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
+  return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> div:not([popover])': {
+      // Sits behind button to provide surface-color background
+      background: "var(--ds-surface, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
+      display: 'flex',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
+      width: "var(--ds-space-250, 20px)",
+      flexDirection: 'column'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button': {
+      background: "var(--ds-background-neutral, #0515240F)",
+      flexDirection: 'column',
+      margin: "var(--ds-space-025, 2px)",
+      outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
+      padding: 0,
+      height: 'calc(100% - 4px)',
+      display: 'flex'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button:hover': {
+      background: "var(--ds-background-neutral-hovered, #0B120E24)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button:active': {
+      background: "var(--ds-background-neutral-pressed, #080F214A)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button > span': {
+      margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& span': {
+      pointerEvents: 'none'
+    }
+  });
+};
+var legacyCellButtonStyles = function legacyCellButtonStyles() {
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
@@ -53,6 +99,9 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
     }
   });
 };
+var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+  return (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
+};
 var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766

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

@@ -10,6 +10,7 @@ var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../types");
 var _consts = require("./consts");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
@@ -49,7 +50,7 @@ var roundedTableStickyHeaderNumberColumnStyles = function roundedTableStickyHead
   return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-bottom: none;\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-xlarge, 12px)");
 };
 var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeaderCornerMaskStyles() {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), _types.TableCssClassName.TABLE_CORNER_MASK, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts.nativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_CORNER_MASK, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK);
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), _types.TableCssClassName.TABLE_CORNER_MASK, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts.nativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_CORNER_MASK, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) ? "".concat(_types.TableCssClassName.NATIVE_STICKY, ".").concat(_types.TableCssClassName.NATIVE_STICKY_ACTIVE) : _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK);
 };
 var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
   return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, (0, _platformFeatureFlags.fg)('platform_editor_table_q4_patch_1') ? (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t\t   rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> td.", "[data-reaches-top]::after {\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderSelectedColor) : '');

package/dist/es2019/nodeviews/TableRow.js

@@ -561,15 +561,29 @@ export default class TableRow extends TableNodeView {
       if (isCurrentTableSelected) {
         this.colControlsOffset = tableControlsSpacing;
 
-        // move table a little out of the way
-        // to provide spacing for table controls
-        if (isTableInsideLayout) {
-          tableContentWrapper.style.paddingLeft = '11px';
+        /**
+         * Adding padding left causes flicker when table is inside layout column
+         * 	and selection moves in/out of table.
+         */
+        if (!fg('platform_editor_table_flicker_issue')) {
+          // move table a little out of the way
+          // to provide spacing for table controls
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.paddingLeft = '11px';
+            tableContentWrapper.style.marginLeft = '-11px';
+          }
         }
       } else {
         this.colControlsOffset = 0;
-        if (isTableInsideLayout) {
-          tableContentWrapper.style.removeProperty('padding-left');
+        /**
+         * Adding padding left causes flicker when table is inside layout column
+         * 	and selection moves in/out of table.
+         */
+        if (!fg('platform_editor_table_flicker_issue')) {
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.removeProperty('padding-left');
+            tableContentWrapper.style.removeProperty('margin-left');
+          }
         }
       }
     }

package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js

@@ -66,6 +66,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     _defineProperty(this, "top", 0);
     _defineProperty(this, "hasScrolledSinceLoad", false);
     _defineProperty(this, "disableNativeSticky", false);
+    _defineProperty(this, "isSingleRowTable", false);
     /**
      * Methods
      */
@@ -93,6 +94,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
       }
     });
     this.isHeaderRow = supportedHeaderRow(node);
+    if (this.isHeaderRow && expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+      this.isSingleRowTable = this.checkIsSingleRowTable();
+    }
     this.isLegacySticky = false;
     const {
       pluginConfig
@@ -168,6 +172,10 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   update(node, ..._args) {
+    if (this.isHeaderRow && expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+      this.updateSingleRowTableStickyHeaderState();
+    }
+
     // do nothing if nodes were identical
     if (node === this.node) {
       return true;
@@ -271,6 +279,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
          *  be cleaned up.
          */
         entries.forEach(entry => {
+          if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           const tableWrapper = this.dom.closest(`.${ClassName.TABLE_NODE_WRAPPER}`);
           if (tableWrapper && tableWrapper instanceof HTMLElement && !areAllRectsZero(entry)) {
             if (entry.isIntersecting) {
@@ -360,6 +371,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
         if (!(observer.root instanceof HTMLElement)) {
           return;
         }
+        if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+          return;
+        }
         // Only apply classes if page has scrolled since load
         if (!this.hasScrolledSinceLoad) {
           this.overflowObserverEntries = entries;
@@ -407,6 +421,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     this.stickyStateObserver = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         var _entry$rootBounds;
+        if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+          return;
+        }
         const tableContainer = this.dom.closest(`.${ClassName.TABLE_CONTAINER}`);
         if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) && !this.disableNativeSticky) {
           this.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
@@ -535,6 +552,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
   initNodeVisibilityObserver() {
     this.nodeVisibilityObserver = new IntersectionObserver(entries => {
       entries.forEach(entry => {
+        if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+          return;
+        }
         if (!this.isNativeSticky) {
           return;
         }
@@ -623,6 +643,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     });
   }
   refreshLegacyStickyState() {
+    if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+      return;
+    }
     const tree = getTree(this.dom);
     if (!tree) {
       return;
@@ -774,15 +797,27 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
       if (isCurrentTableSelected) {
         this.colControlsOffset = tableControlsSpacing;
 
-        // move table a little out of the way
-        // to provide spacing for table controls
-        if (isTableInsideLayout) {
-          tableContentWrapper.style.paddingLeft = '11px';
+        /**
+         * Adding padding left causes flicker when table is inside layout column
+         * 	and selection moves in/out of table.
+         */
+        if (!fg('platform_editor_table_flicker_issue')) {
+          // move table a little out of the way
+          // to provide spacing for table controls
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.paddingLeft = '11px';
+          }
         }
       } else {
         this.colControlsOffset = 0;
-        if (isTableInsideLayout) {
-          tableContentWrapper.style.removeProperty('padding-left');
+        /**
+         * Adding padding left causes flicker when table is inside layout column
+         * 	and selection moves in/out of table.
+         */
+        if (!fg('platform_editor_table_flicker_issue')) {
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.removeProperty('padding-left');
+          }
         }
       }
     }
@@ -815,6 +850,59 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
       });
     }
   }
+  checkIsSingleRowTable() {
+    const pos = this.getPos();
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    try {
+      var _findParentNodeCloses3;
+      const $tableRowPos = this.view.state.doc.resolve(pos);
+      const tableNode = (_findParentNodeCloses3 = findParentNodeClosestToPos($tableRowPos, node => node.type === this.view.state.schema.nodes.table)) === null || _findParentNodeCloses3 === void 0 ? void 0 : _findParentNodeCloses3.node;
+      return (tableNode === null || tableNode === void 0 ? void 0 : tableNode.childCount) === 1;
+    } catch {
+      // getPos can return stale positions during AI streaming. Preserve the original sticky
+      // header behaviour when the containing table cannot be determined.
+      return false;
+    }
+  }
+  updateSingleRowTableStickyHeaderState() {
+    const wasSingleRowTable = this.isSingleRowTable;
+    this.isSingleRowTable = this.checkIsSingleRowTable();
+    if (this.isSingleRowTable) {
+      this.removeSingleRowTableStickyHeaderState();
+    } else if (wasSingleRowTable) {
+      this.refireNativeStickyObservers();
+    }
+    return this.isSingleRowTable;
+  }
+  removeSingleRowTableStickyHeaderState() {
+    this.dom.classList.remove(ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE);
+    this.isNativeSticky = false;
+    const tableWrapper = this.dom.closest(`.${ClassName.TABLE_NODE_WRAPPER}`);
+    tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+    const tableContainer = this.dom.closest(`.${ClassName.TABLE_CONTAINER}`);
+    if (tableContainer instanceof HTMLElement) {
+      delete tableContainer.dataset.tableHeaderIsStuck;
+    }
+    const tree = getTree(this.dom);
+    if (tree) {
+      this.makeRowHeaderNotLegacySticky(tree.table);
+    }
+  }
+  refireNativeStickyObservers() {
+    var _this$stickyStateObse2, _this$stickyStateObse3;
+    const table = this.dom.closest('table');
+    if (table) {
+      var _this$overflowObserve3, _this$overflowObserve4, _this$nodeVisibilityO3, _this$nodeVisibilityO4;
+      (_this$overflowObserve3 = this.overflowObserver) === null || _this$overflowObserve3 === void 0 ? void 0 : _this$overflowObserve3.unobserve(table);
+      (_this$overflowObserve4 = this.overflowObserver) === null || _this$overflowObserve4 === void 0 ? void 0 : _this$overflowObserve4.observe(table);
+      (_this$nodeVisibilityO3 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO3 === void 0 ? void 0 : _this$nodeVisibilityO3.unobserve(table);
+      (_this$nodeVisibilityO4 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO4 === void 0 ? void 0 : _this$nodeVisibilityO4.observe(table);
+    }
+    (_this$stickyStateObse2 = this.stickyStateObserver) === null || _this$stickyStateObse2 === void 0 ? void 0 : _this$stickyStateObse2.unobserve(this.dom);
+    (_this$stickyStateObse3 = this.stickyStateObserver) === null || _this$stickyStateObse3 === void 0 ? void 0 : _this$stickyStateObse3.observe(this.dom);
+  }
   makeHeaderRowLegacySticky(tree, scrollTop) {
     var _tbody$firstChild;
     // If header row height is more than 50% of viewport height don't do this

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

@@ -1,8 +1,53 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { contextualMenuTriggerSize } from '../consts';
-export const tableFloatingCellButtonStyles = () => css({
+
+// Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
+const topLayerTooltipCellButtonStyles = () => css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '> div:not([popover])': {
+    // Sits behind button to provide surface-color background
+    background: "var(--ds-surface, #FFFFFF)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
+    display: 'flex',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: `${contextualMenuTriggerSize + 2}px`,
+    width: "var(--ds-space-250, 20px)",
+    flexDirection: 'column'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&& button': {
+    background: "var(--ds-background-neutral, #0515240F)",
+    flexDirection: 'column',
+    margin: "var(--ds-space-025, 2px)",
+    outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
+    padding: 0,
+    height: 'calc(100% - 4px)',
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&& button:hover': {
+    background: "var(--ds-background-neutral-hovered, #0B120E24)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&& button:active': {
+    background: "var(--ds-background-neutral-pressed, #080F214A)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&& button > span': {
+    margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&& span': {
+    pointerEvents: 'none'
+  }
+});
+const legacyCellButtonStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     // Sits behind button to provide surface-color background
@@ -44,6 +89,7 @@ export const tableFloatingCellButtonStyles = () => css({
     pointerEvents: 'none'
   }
 });
+export const tableFloatingCellButtonStyles = () => fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
 export const tableFloatingCellButtonSelectedStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {

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

@@ -5,6 +5,7 @@ import { css } from '@emotion/react';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
 import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
 const roundedTableCellCornerStyles = () => css`
@@ -481,7 +482,7 @@ const roundedTableStickyHeaderCornerMaskStyles = () => css`
 		sticky / fallback layout. The masks belong to the wrapper of the table
 		that owns the sticky row, never to an ancestor wrapper.
 	*/
-	.${ClassName.TABLE_NODE_WRAPPER}:has(> table > tbody > tr.${ClassName.NATIVE_STICKY_ACTIVE})
+	.${ClassName.TABLE_NODE_WRAPPER}:has(> table > tbody > tr.${expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) ? `${ClassName.NATIVE_STICKY}.${ClassName.NATIVE_STICKY_ACTIVE}` : ClassName.NATIVE_STICKY_ACTIVE})
 		> .${ClassName.TABLE_CORNER_MASK},
 		.${ClassName.TABLE_NODE_WRAPPER}:has(> table.${ClassName.TABLE_STICKY} > tbody > tr.sticky)
 		> .${ClassName.TABLE_CORNER_MASK} {

package/dist/esm/nodeviews/TableRow.js

@@ -593,15 +593,29 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         if (isCurrentTableSelected) {
           this.colControlsOffset = tableControlsSpacing;
 
-          // move table a little out of the way
-          // to provide spacing for table controls
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.paddingLeft = '11px';
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!fg('platform_editor_table_flicker_issue')) {
+            // move table a little out of the way
+            // to provide spacing for table controls
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.paddingLeft = '11px';
+              tableContentWrapper.style.marginLeft = '-11px';
+            }
           }
         } else {
           this.colControlsOffset = 0;
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.removeProperty('padding-left');
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!fg('platform_editor_table_flicker_issue')) {
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.removeProperty('padding-left');
+              tableContentWrapper.style.removeProperty('margin-left');
+            }
           }
         }
       }

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -75,6 +75,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
     _defineProperty(_this, "top", 0);
     _defineProperty(_this, "hasScrolledSinceLoad", false);
     _defineProperty(_this, "disableNativeSticky", false);
+    _defineProperty(_this, "isSingleRowTable", false);
     /**
      * Methods
      */
@@ -102,6 +103,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
       }
     });
     _this.isHeaderRow = supportedHeaderRow(node);
+    if (_this.isHeaderRow && expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+      _this.isSingleRowTable = _this.checkIsSingleRowTable();
+    }
     _this.isLegacySticky = false;
     var _getPluginState = getPluginState(view.state),
       pluginConfig = _getPluginState.pluginConfig;
@@ -180,6 +184,10 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function update(node) {
+      if (this.isHeaderRow && expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true)) {
+        this.updateSingleRowTableStickyHeaderState();
+      }
+
       // do nothing if nodes were identical
       if (node === this.node) {
         return true;
@@ -290,6 +298,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
            *  be cleaned up.
            */
           entries.forEach(function (entry) {
+            if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this3.updateSingleRowTableStickyHeaderState()) {
+              return;
+            }
             var tableWrapper = _this3.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
             if (tableWrapper && tableWrapper instanceof HTMLElement && !areAllRectsZero(entry)) {
               if (entry.isIntersecting) {
@@ -384,6 +395,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this4.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           // Only apply classes if page has scrolled since load
           if (!_this4.hasScrolledSinceLoad) {
             _this4.overflowObserverEntries = entries;
@@ -434,6 +448,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
+          if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this5.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           var tableContainer = _this5.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
           if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) && !_this5.disableNativeSticky) {
             _this5.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
@@ -572,6 +589,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
       var _this7 = this;
       this.nodeVisibilityObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
+          if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && _this7.updateSingleRowTableStickyHeaderState()) {
+            return;
+          }
           if (!_this7.isNativeSticky) {
             return;
           }
@@ -664,6 +684,9 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "refreshLegacyStickyState",
     value: function refreshLegacyStickyState() {
+      if (expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) && this.updateSingleRowTableStickyHeaderState()) {
+        return;
+      }
       var tree = getTree(this.dom);
       if (!tree) {
         return;
@@ -815,15 +838,27 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
         if (isCurrentTableSelected) {
           this.colControlsOffset = tableControlsSpacing;
 
-          // move table a little out of the way
-          // to provide spacing for table controls
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.paddingLeft = '11px';
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!fg('platform_editor_table_flicker_issue')) {
+            // move table a little out of the way
+            // to provide spacing for table controls
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.paddingLeft = '11px';
+            }
           }
         } else {
           this.colControlsOffset = 0;
-          if (isTableInsideLayout) {
-            tableContentWrapper.style.removeProperty('padding-left');
+          /**
+           * Adding padding left causes flicker when table is inside layout column
+           * 	and selection moves in/out of table.
+           */
+          if (!fg('platform_editor_table_flicker_issue')) {
+            if (isTableInsideLayout) {
+              tableContentWrapper.style.removeProperty('padding-left');
+            }
           }
         }
       }
@@ -861,11 +896,75 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
         });
       }
     }
+  }, {
+    key: "checkIsSingleRowTable",
+    value: function checkIsSingleRowTable() {
+      var _this1 = this;
+      var pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return false;
+      }
+      try {
+        var _findParentNodeCloses3;
+        var $tableRowPos = this.view.state.doc.resolve(pos);
+        var tableNode = (_findParentNodeCloses3 = findParentNodeClosestToPos($tableRowPos, function (node) {
+          return node.type === _this1.view.state.schema.nodes.table;
+        })) === null || _findParentNodeCloses3 === void 0 ? void 0 : _findParentNodeCloses3.node;
+        return (tableNode === null || tableNode === void 0 ? void 0 : tableNode.childCount) === 1;
+      } catch (_unused3) {
+        // getPos can return stale positions during AI streaming. Preserve the original sticky
+        // header behaviour when the containing table cannot be determined.
+        return false;
+      }
+    }
+  }, {
+    key: "updateSingleRowTableStickyHeaderState",
+    value: function updateSingleRowTableStickyHeaderState() {
+      var wasSingleRowTable = this.isSingleRowTable;
+      this.isSingleRowTable = this.checkIsSingleRowTable();
+      if (this.isSingleRowTable) {
+        this.removeSingleRowTableStickyHeaderState();
+      } else if (wasSingleRowTable) {
+        this.refireNativeStickyObservers();
+      }
+      return this.isSingleRowTable;
+    }
+  }, {
+    key: "removeSingleRowTableStickyHeaderState",
+    value: function removeSingleRowTableStickyHeaderState() {
+      this.dom.classList.remove(ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE);
+      this.isNativeSticky = false;
+      var tableWrapper = this.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
+      tableWrapper === null || tableWrapper === void 0 || tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+      var tableContainer = this.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
+      if (tableContainer instanceof HTMLElement) {
+        delete tableContainer.dataset.tableHeaderIsStuck;
+      }
+      var tree = getTree(this.dom);
+      if (tree) {
+        this.makeRowHeaderNotLegacySticky(tree.table);
+      }
+    }
+  }, {
+    key: "refireNativeStickyObservers",
+    value: function refireNativeStickyObservers() {
+      var _this$stickyStateObse2, _this$stickyStateObse3;
+      var table = this.dom.closest('table');
+      if (table) {
+        var _this$overflowObserve2, _this$overflowObserve3, _this$nodeVisibilityO3, _this$nodeVisibilityO4;
+        (_this$overflowObserve2 = this.overflowObserver) === null || _this$overflowObserve2 === void 0 || _this$overflowObserve2.unobserve(table);
+        (_this$overflowObserve3 = this.overflowObserver) === null || _this$overflowObserve3 === void 0 || _this$overflowObserve3.observe(table);
+        (_this$nodeVisibilityO3 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO3 === void 0 || _this$nodeVisibilityO3.unobserve(table);
+        (_this$nodeVisibilityO4 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO4 === void 0 || _this$nodeVisibilityO4.observe(table);
+      }
+      (_this$stickyStateObse2 = this.stickyStateObserver) === null || _this$stickyStateObse2 === void 0 || _this$stickyStateObse2.unobserve(this.dom);
+      (_this$stickyStateObse3 = this.stickyStateObserver) === null || _this$stickyStateObse3 === void 0 || _this$stickyStateObse3.observe(this.dom);
+    }
   }, {
     key: "makeHeaderRowLegacySticky",
     value: function makeHeaderRowLegacySticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this1 = this;
+        _this10 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isLegacySticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -904,7 +1003,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this1.refireIntersectionObservers();
+          _this10.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

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

@@ -1,8 +1,55 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { contextualMenuTriggerSize } from '../consts';
-export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+
+// Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
+var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> div:not([popover])': {
+      // Sits behind button to provide surface-color background
+      background: "var(--ds-surface, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
+      display: 'flex',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(contextualMenuTriggerSize + 2, "px"),
+      width: "var(--ds-space-250, 20px)",
+      flexDirection: 'column'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button': {
+      background: "var(--ds-background-neutral, #0515240F)",
+      flexDirection: 'column',
+      margin: "var(--ds-space-025, 2px)",
+      outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
+      padding: 0,
+      height: 'calc(100% - 4px)',
+      display: 'flex'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button:hover': {
+      background: "var(--ds-background-neutral-hovered, #0B120E24)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button:active': {
+      background: "var(--ds-background-neutral-pressed, #080F214A)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& button > span': {
+      margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&& span': {
+      pointerEvents: 'none'
+    }
+  });
+};
+var legacyCellButtonStyles = function legacyCellButtonStyles() {
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
@@ -46,6 +93,9 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
     }
   });
 };
+export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+  return fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
+};
 export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766

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

@@ -7,6 +7,7 @@ import { css } from '@emotion/react';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
 import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
 var roundedTableCellCornerStyles = function roundedTableCellCornerStyles() {
@@ -43,7 +44,7 @@ var roundedTableStickyHeaderNumberColumnStyles = function roundedTableStickyHead
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-bottom: none;\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-xlarge, 12px)");
 };
 var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeaderCornerMaskStyles() {
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), ClassName.TABLE_CORNER_MASK, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_CORNER_MASK, akEditorTableNumberColumnWidth, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK);
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), ClassName.TABLE_CORNER_MASK, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_CORNER_MASK, akEditorTableNumberColumnWidth, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) ? "".concat(ClassName.NATIVE_STICKY, ".").concat(ClassName.NATIVE_STICKY_ACTIVE) : ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK);
 };
 var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
   return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_HEADER_CELL, fg('platform_editor_table_q4_patch_1') ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t\t   rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> td.", "[data-reaches-top]::after {\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderSelectedColor) : '');

package/dist/types/nodeviews/TableRowNativeStickyWithFallback.d.ts

@@ -40,6 +40,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private onEditorContentAreaHeightChange?;
     private editorContentAreaHeight?;
     private nodeVisibilityObserver?;
+    private isSingleRowTable;
     /**
      * Methods: Nodeview Lifecycle
      */
@@ -77,6 +78,10 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
      * Useful when the header may have detached from the table.
      */
     private refireIntersectionObservers;
+    private checkIsSingleRowTable;
+    private updateSingleRowTableStickyHeaderState;
+    private removeSingleRowTableStickyHeaderState;
+    private refireNativeStickyObservers;
     private toggleDisableNativeSticky;
     private makeHeaderRowLegacySticky;
     private makeRowHeaderNotLegacySticky;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "24.4.16",
+	"version": "24.4.18",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^12.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
-		"@atlaskit/editor-plugin-extension": "15.0.35",
+		"@atlaskit/editor-plugin-extension": "15.0.36",
 		"@atlaskit/editor-plugin-guideline": "^12.0.0",
 		"@atlaskit/editor-plugin-interaction": "^23.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^9.0.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^22.1.0",
-		"@atlaskit/tmp-editor-statsig": "^131.0.0",
+		"@atlaskit/tmp-editor-statsig": "^132.1.0",
 		"@atlaskit/toggle": "^17.1.0",
 		"@atlaskit/tokens": "^16.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
@@ -159,6 +159,12 @@
 		},
 		"platform_editor_table_cell_menu_update": {
 			"type": "boolean"
+		},
+		"platform-dst-top-layer-tooltip": {
+			"type": "boolean"
+		},
+		"platform_editor_table_flicker_issue": {
+			"type": "boolean"
 		}
 	},
 	"devDependencies": {