@atlaskit/editor-plugin-table 7.28.2 → 7.28.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.4
+
+### Patch Changes
+
+- [#146656](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146656)
+  [`2c23467e86c29`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c23467e86c29) -
+  [ux] No-issue: Set isFacadeDisabled to true for table cell dropdown
+- [#146417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146417)
+  [`4302239b19be5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4302239b19be5) -
+  Migrate table useSharedStateHook FF from LD to Statsig experiment.
+
+## 7.28.3
+
+### Patch Changes
+
+- [#145959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145959)
+  [`ea00ae7d7d94f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea00ae7d7d94f) -
+  [ED-25130] Fix sticky header numbered column when using the new breakout css logic
+  (container-type)
+- Updated dependencies
+
 ## 7.28.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -27,6 +27,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../commands");
 var _eventHandlers = require("../event-handlers");
 var _utils3 = require("../pm-plugins/drag-and-drop/utils");
@@ -609,7 +610,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
-      if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', false)) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -753,7 +754,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', false)) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;

package/dist/cjs/nodeviews/table.js

@@ -22,7 +22,7 @@ var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _createPluginConfig = require("../create-plugin-config");
 var _dragAndDrop = require("../pm-plugins/drag-and-drop");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -136,7 +136,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
-      if ((0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true)) {
         return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
           forwardRef: forwardRef,
           getNode: this.getNode,

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

@@ -89,8 +89,24 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  var targetCellRect = targetCellRef.getBoundingClientRect();
   var fixedButtonTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  var containerLeft = (0, _react.useMemo)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
+      return 0;
+    }
+    var container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+    return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
+  }, [targetCellRef]);
+  var left = (0, _react.useMemo)(function () {
+    var targetCellRect = targetCellRef.getBoundingClientRect();
+    var baseLeft = calcLeftPos({
+      buttonWidth: BUTTON_WIDTH,
+      cellRectLeft: targetCellRect.left,
+      cellRefWidth: targetCellRef.clientWidth,
+      offset: offset
+    });
+    return baseLeft - containerLeft;
+  }, [containerLeft, targetCellRef, offset]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -125,12 +141,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      left: calcLeftPos({
-        buttonWidth: BUTTON_WIDTH,
-        cellRectLeft: targetCellRect.left,
-        cellRefWidth: targetCellRef.clientWidth,
-        offset: offset
-      }),
+      left: left,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH

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

@@ -88,7 +88,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     keymap: (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? _keymaps.focusToContextMenuTrigger : undefined,
     onClick: handleClick,
     iconBefore: (0, _react2.jsx)(_chevronDown.default, {
-      label: ""
+      label: "",
+      isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,
     "aria-expanded": (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _types = require("../../types");
 var _utils = require("../../utils");
 var _ColumnControls = require("./ColumnControls");
@@ -104,7 +105,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: (0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? api : undefined
+    api: (0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? api : undefined
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -17,6 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../commands");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
@@ -76,9 +77,10 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         stickyTop = _this$props3.stickyTop,
         hasHeaderRow = _this$props3.hasHeaderRow;
       if (stickyTop && hasHeaderRow && index === 0) {
+        var topOffset = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyTop;
         return {
           height: rowHeight,
-          top: "".concat(stickyTop, "px")
+          top: "".concat(topOffset, "px")
         };
       }
       return {

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

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../commands");
 var _types = require("../../types");
 var _nodes = require("../../utils/nodes");
@@ -108,7 +108,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && ((0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -133,7 +133,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : (0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
+    })) : (0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/es2019/nodeviews/TableComponent.js

@@ -13,6 +13,7 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
@@ -589,7 +590,7 @@ class TableComponent extends React.Component {
       isInDanger
     } = this.props;
     const table = findTable(view.state.selection);
-    if (!fg('platform.editor.table.use-shared-state-hook')) {
+    if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
     }
@@ -733,7 +734,7 @@ class TableComponent extends React.Component {
       showAfterShadow
     } = this.state;
     const node = getNode();
-    if (!fg('platform.editor.table.use-shared-state-hook')) {
+    if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
       hoveredRows = pluginState.hoveredRows;

package/dist/es2019/nodeviews/table.js

@@ -6,7 +6,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -103,7 +103,7 @@ export default class TableView extends ReactNodeView {
     }
   }
   render(props, forwardRef) {
-    if (fg('platform.editor.table.use-shared-state-hook')) {
+    if (editorExperiment('platform_editor_table_use_shared_state_hook', true)) {
       return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
         forwardRef: forwardRef,
         getNode: this.getNode,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
@@ -81,8 +81,24 @@ export const FixedButton = ({
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  const targetCellRect = targetCellRef.getBoundingClientRect();
   const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  const containerLeft = useMemo(() => {
+    if (!fg('platform_editor_breakout_use_css')) {
+      return 0;
+    }
+    const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+    return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
+  }, [targetCellRef]);
+  const left = useMemo(() => {
+    const targetCellRect = targetCellRef.getBoundingClientRect();
+    const baseLeft = calcLeftPos({
+      buttonWidth: BUTTON_WIDTH,
+      cellRectLeft: targetCellRect.left,
+      cellRefWidth: targetCellRef.clientWidth,
+      offset
+    });
+    return baseLeft - containerLeft;
+  }, [containerLeft, targetCellRef, offset]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -117,12 +133,7 @@ export const FixedButton = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      left: calcLeftPos({
-        buttonWidth: BUTTON_WIDTH,
-        cellRectLeft: targetCellRect.left,
-        cellRefWidth: targetCellRef.clientWidth,
-        offset
-      }),
+      left,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH

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

@@ -85,7 +85,8 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     keymap: fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined,
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
-      label: ""
+      label: "",
+      isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,
     "aria-expanded": fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
 import { ColumnControls } from './ColumnControls';
@@ -93,7 +94,7 @@ const TableFloatingColumnControls = ({
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: fg('platform.editor.table.use-shared-state-hook') ? api : undefined
+    api: editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
@@ -57,9 +58,10 @@ export default class NumberColumn extends Component {
         hasHeaderRow
       } = this.props;
       if (stickyTop && hasHeaderRow && index === 0) {
+        const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
         return {
           height: rowHeight,
-          top: `${stickyTop}px`
+          top: `${topOffset}px`
         };
       }
       return {

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import { isTableNested } from '../../utils/nodes';
@@ -106,7 +106,7 @@ export const TableFloatingControls = ({
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (fg('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -131,7 +131,7 @@ export const TableFloatingControls = ({
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : fg('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    })) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/esm/nodeviews/TableComponent.js

@@ -27,6 +27,7 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
@@ -602,7 +603,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
-      if (!fg('platform.editor.table.use-shared-state-hook')) {
+      if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -746,7 +747,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (!fg('platform.editor.table.use-shared-state-hook')) {
+      if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;

package/dist/esm/nodeviews/table.js

@@ -17,7 +17,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -129,7 +129,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
-      if (fg('platform.editor.table.use-shared-state-hook')) {
+      if (editorExperiment('platform_editor_table_use_shared_state_hook', true)) {
         return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
           forwardRef: forwardRef,
           getNode: this.getNode,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
@@ -79,8 +79,24 @@ export var FixedButton = function FixedButton(_ref2) {
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  var targetCellRect = targetCellRef.getBoundingClientRect();
   var fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  var containerLeft = useMemo(function () {
+    if (!fg('platform_editor_breakout_use_css')) {
+      return 0;
+    }
+    var container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+    return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
+  }, [targetCellRef]);
+  var left = useMemo(function () {
+    var targetCellRect = targetCellRef.getBoundingClientRect();
+    var baseLeft = calcLeftPos({
+      buttonWidth: BUTTON_WIDTH,
+      cellRectLeft: targetCellRect.left,
+      cellRefWidth: targetCellRef.clientWidth,
+      offset: offset
+    });
+    return baseLeft - containerLeft;
+  }, [containerLeft, targetCellRef, offset]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -115,12 +131,7 @@ export var FixedButton = function FixedButton(_ref2) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      left: calcLeftPos({
-        buttonWidth: BUTTON_WIDTH,
-        cellRectLeft: targetCellRect.left,
-        cellRefWidth: targetCellRef.clientWidth,
-        offset: offset
-      }),
+      left: left,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH

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

@@ -77,7 +77,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     keymap: fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined,
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
-      label: ""
+      label: "",
+      isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,
     "aria-expanded": fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
 import { ColumnControls } from './ColumnControls';
@@ -94,7 +95,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: fg('platform.editor.table.use-shared-state-hook') ? api : undefined
+    api: editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -11,6 +11,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
@@ -66,9 +67,10 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         stickyTop = _this$props3.stickyTop,
         hasHeaderRow = _this$props3.hasHeaderRow;
       if (stickyTop && hasHeaderRow && index === 0) {
+        var topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
         return {
           height: rowHeight,
-          top: "".concat(stickyTop, "px")
+          top: "".concat(topOffset, "px")
         };
       }
       return {

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import { isTableNested } from '../../utils/nodes';
@@ -98,7 +98,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (fg('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -123,7 +123,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : fg('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    })) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.2",
+	"version": "7.28.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^91.1.0",
+		"@atlaskit/editor-common": "^91.2.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.19.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -103,9 +103,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.table.use-shared-state-hook": {
-			"type": "boolean"
-		},
 		"platform_editor_batch_steps_table": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableComponent.tsx

@@ -26,6 +26,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
@@ -117,7 +118,7 @@ interface ComponentProps {
 	pluginInjectionApi?: PluginInjectionAPI;
 	intl: IntlShape;
 
-	// marking props as option to ensure backward compatibility when platform.editor.table.use-shared-state-hook disabled
+	// marking props as option to ensure backward compatibility when platform_editor_table_use_shared_state_hook disabled
 	isInDanger?: boolean;
 	hoveredRows?: number[];
 	hoveredCell?: CellHoverMeta;
@@ -536,7 +537,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const table = findTable(view.state.selection);
 
-		if (!fg('platform.editor.table.use-shared-state-hook')) {
+		if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 		}
@@ -749,7 +750,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const { showBeforeShadow, showAfterShadow } = this.state;
 		const node = getNode();
 
-		if (!fg('platform.editor.table.use-shared-state-hook')) {
+		if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 			hoveredRows = pluginState.hoveredRows;

package/src/nodeviews/table.tsx

@@ -19,7 +19,7 @@ import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state'
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
@@ -182,7 +182,7 @@ export default class TableView extends ReactNodeView<Props> {
 	};
 
 	render(props: Props, forwardRef: ForwardRef) {
-		if (fg('platform.editor.table.use-shared-state-hook')) {
+		if (editorExperiment('platform_editor_table_use_shared_state_hook', true)) {
 			return (
 				<TableComponentWithSharedState
 					forwardRef={forwardRef}

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
@@ -130,10 +130,29 @@ export const FixedButton = ({
 		isContextualMenuOpen,
 	]);
 
-	const targetCellRect = targetCellRef.getBoundingClientRect();
-
 	const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
 
+	const containerLeft = useMemo(() => {
+		if (!fg('platform_editor_breakout_use_css')) {
+			return 0;
+		}
+
+		const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+		return container?.getBoundingClientRect().left || 0;
+	}, [targetCellRef]);
+
+	const left = useMemo(() => {
+		const targetCellRect = targetCellRef.getBoundingClientRect();
+		const baseLeft = calcLeftPos({
+			buttonWidth: BUTTON_WIDTH,
+			cellRectLeft: targetCellRect.left,
+			cellRefWidth: targetCellRef.clientWidth,
+			offset,
+		});
+
+		return baseLeft - containerLeft;
+	}, [containerLeft, targetCellRef, offset]);
+
 	// Using a portal here to ensure wrapperRef has the tableWrapper as an
 	// ancestor. This is required to make the Intersection Observer work.
 	return createPortal(
@@ -166,12 +185,7 @@ export const FixedButton = ({
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 					zIndex: akEditorTableCellOnStickyHeaderZIndex,
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					left: calcLeftPos({
-						buttonWidth: BUTTON_WIDTH,
-						cellRectLeft: targetCellRect.left,
-						cellRefWidth: targetCellRef.clientWidth,
-						offset,
-					}),
+					left,
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 					width: token('space.250', '20px'), // BUTTON_WIDTH
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/src/ui/FloatingContextualButton/index.tsx

@@ -110,7 +110,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 					fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined
 				}
 				onClick={handleClick}
-				iconBefore={<ExpandIcon label="" />}
+				iconBefore={<ExpandIcon label="" isFacadeDisabled={true} />}
 				aria-label={labelCellOptions}
 				aria-expanded={
 					fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -7,6 +7,7 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData, PluginInjectionAPI } from '../../types';
@@ -136,7 +137,9 @@ const TableFloatingColumnControls = ({
 				isNumberColumnEnabled={isNumberColumnEnabled}
 				isDragging={isDragging}
 				getScrollOffset={getScrollOffset}
-				api={fg('platform.editor.table.use-shared-state-hook') ? api : undefined}
+				api={
+					editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
+				}
 			/>
 			{isDragging && (
 				<ColumnDropTargets

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -111,9 +112,11 @@ export default class NumberColumn extends Component<Props, any> {
 	private getCellStyles = (index: number, rowHeight: number) => {
 		const { stickyTop, hasHeaderRow } = this.props;
 		if (stickyTop && hasHeaderRow && index === 0) {
+			const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
+
 			return {
 				height: rowHeight,
-				top: `${stickyTop}px`,
+				top: `${topOffset}px`,
 			};
 		}
 		return {

package/src/ui/TableFloatingControls/index.tsx

@@ -8,7 +8,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import type { TablePlugin } from '../../plugin';
@@ -163,7 +163,7 @@ export const TableFloatingControls = ({
 						{isDragAndDropEnabled ? (
 							<>
 								{shouldShowCornerControls &&
-									(fg('platform.editor.table.use-shared-state-hook') ? (
+									(editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
 										<DragCornerControlsWithSelection
 											editorView={editorView}
 											tableRef={tableRef}
@@ -195,7 +195,7 @@ export const TableFloatingControls = ({
 									updateCellHoverLocation={updateCellHoverLocation}
 								/>
 							</>
-						) : fg('platform.editor.table.use-shared-state-hook') ? (
+						) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
 							<FloatingControlsWithSelection
 								editorView={editorView}
 								tableRef={tableRef}