@atlaskit/editor-plugin-table 15.2.1 → 15.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 15.2.3
+
+### Patch Changes
+
+- [`14a03e6be917d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14a03e6be917d) -
+  upgrade use of browser util
+- Updated dependencies
+
+## 15.2.2
+
+### Patch Changes
+
+- [`5f70b8e74f5f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f70b8e74f5f3) -
+  tidy up feature flag platform_editor_tables_scaling_css
+- Updated dependencies
+
 ## 15.2.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentLegacy.js

@@ -18,6 +18,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _collab = require("@atlaskit/editor-common/collab");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
@@ -58,7 +59,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-var isIE11 = _utils.browser.ie_version === 11;
 // When table is inserted via paste, keyboard shortcut or quickInsert,
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // To make sure we capture the last update, we use setTimeout.
@@ -363,7 +363,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
         isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
       var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && isFullPageEditor) {
+      if (isFullPageEditor) {
         return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
       }
       return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
@@ -447,10 +447,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         });
-        if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-          window.addEventListener('resize', this.handleWindowResizeNewDebounced);
-        }
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
       }
     }
   }, {
@@ -465,9 +463,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowTableResizing = _this$props7.allowTableResizing,
         eventDispatcher = _this$props7.eventDispatcher,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
-        getNode = _this$props7.getNode,
-        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+        getNode = _this$props7.getNode;
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+      var isIE11 = browser.ie_version === 11;
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -480,17 +478,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-      if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-          this.handleColgroupUpdates(true);
-        }
-        if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
-          this.handleColgroupUpdates(true);
-        }
-      }
       if (this.wrapper) {
         this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
           var _iterator2 = _createForOfIteratorHelper(entries),
@@ -561,6 +548,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isDragAndDropEnabled = _this$props8.isDragAndDropEnabled,
         view = _this$props8.view,
         isInDanger = _this$props8.isInDanger;
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+      var isIE11 = browser.ie_version === 11;
       if (this.wrapper && !isIE11) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -595,10 +584,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
-      }
+
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -688,7 +676,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerLineLength = containerWidth.lineLength;
       var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
       var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
       if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
         var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
         var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
@@ -707,9 +695,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
           isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
         });
-        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-          _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
         var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
@@ -793,9 +781,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var table = (0, _utils2.findTable)(view.state.selection);
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
       if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -806,7 +794,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+      if (this.state.windowResized) {
         shouldHandleColgroupUpdates = true;
       }
       if (shouldHandleColgroupUpdates) {
@@ -1021,9 +1009,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
       var topOffset = 0;
       var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
-      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag8 === void 0 ? false : _getEditorFeatureFlag8;
+      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/nodeviews/TableComponentNext.js

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
+var _browser = require("@atlaskit/editor-common/browser");
 var _collab = require("@atlaskit/editor-common/collab");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
@@ -53,8 +54,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-var isIE11 = _utils.browser.ie_version === 11;
-
 // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
@@ -306,7 +305,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
         isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
       var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && isFullPageEditor) {
+      if (isFullPageEditor) {
         return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
       }
       return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
@@ -388,10 +387,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         });
-        if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-          window.addEventListener('resize', this.handleWindowResizeNewDebounced);
-        }
+
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
       }
     }
   }, {
@@ -406,9 +404,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowTableResizing = _this$props6.allowTableResizing,
         eventDispatcher = _this$props6.eventDispatcher,
         isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
-        getNode = _this$props6.getNode,
-        getEditorFeatureFlags = _this$props6.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props6.isTableScalingEnabled;
+        getNode = _this$props6.getNode;
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+      var isIE11 = browser.ie_version === 11;
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -421,17 +419,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-      if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-          this.handleColgroupUpdates(true);
-        }
-        if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
-          this.handleColgroupUpdates(true);
-        }
-      }
       if (this.wrapper) {
         this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
           var _iterator2 = _createForOfIteratorHelper(entries),
@@ -498,6 +485,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
         view = _this$props7.view,
         isInDanger = _this$props7.isInDanger;
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+      var isIE11 = browser.ie_version === 11;
       if (this.wrapper && !isIE11) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -532,10 +521,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
-      }
+
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -622,7 +610,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerLineLength = containerWidth.lineLength;
       var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
       var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
       if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
         var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
         var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
@@ -641,9 +629,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
           isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
         });
-        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-          _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
         var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
@@ -724,9 +712,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var table = (0, _utils2.findTable)(view.state.selection);
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
       if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -737,7 +725,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+      if (this.state.windowResized) {
         shouldHandleColgroupUpdates = true;
       }
       if (shouldHandleColgroupUpdates) {
@@ -895,9 +883,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tablePos = undefined;
       }
       var isNested = (0, _nodes.isTableNested)(view.state, tablePos);
-      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag8 === void 0 ? false : _getEditorFeatureFlag8;
+      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/nodeviews/TableContainer.js

@@ -15,8 +15,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -84,8 +82,8 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   }, [alignment]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "table-alignment-container",
-    "data-ssr-placeholder": (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "table-".concat(node.attrs.localId) : undefined,
-    "data-ssr-placeholder-replace": (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "table-".concat(node.attrs.localId) : undefined
+    "data-ssr-placeholder": "table-".concat(node.attrs.localId),
+    "data-ssr-placeholder-replace": "table-".concat(node.attrs.localId)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: style
@@ -101,8 +99,8 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "table-alignment-container",
-      "data-ssr-placeholder": (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "table-".concat(node.attrs.localId) : undefined,
-      "data-ssr-placeholder-replace": (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "table-".concat(node.attrs.localId) : undefined,
+      "data-ssr-placeholder": "table-".concat(node.attrs.localId),
+      "data-ssr-placeholder-replace": "table-".concat(node.attrs.localId),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         display: 'flex',
@@ -129,7 +127,7 @@ var getPadding = function getPadding(containerWidth) {
     exposure: true
   }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
 };
-var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_ref4) {
+var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
     node = _ref4.node,
@@ -146,7 +144,9 @@ var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_
     isTableWithFixedColumnWidthsOptionEnabled = _ref4.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref4.isCommentEditor;
+    isCommentEditor = _ref4.isCommentEditor,
+    isChromelessEditor = _ref4.isChromelessEditor;
+  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var _useState = (0, _react.useState)(false),
@@ -210,186 +210,6 @@ var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
-  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
-  var responsiveContainerWidth = 0;
-  var resizeHandleSpacing = 12;
-  var padding = getPadding(containerWidth);
-  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
-  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
-  // issues when viwport width is less than full width Editor's width. To detect avoid them
-  // we need to use lineLength to defined responsiveWidth instead of containerWidth
-  // (which does not get updated when Mac setting changes) in Full-width editor.
-  if (isFullWidthModeEnabled) {
-    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
-    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
-    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
-
-    // platform_editor_table_fw_numcol_overflow_fix:
-    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
-    // width. rAF col-sizing then runs before the number-column padding and
-    // the final shrink, so column widths are locked in wrong.
-    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
-    // for that first frame—no flash, no premature rAF.
-    //
-    // Type clean-up comes later:
-    // 1) ship this runtime guard (quick fix, no breakage);
-    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
-    if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
-      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
-      }
-    }
-  } else if (isCommentEditor) {
-    responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
-  } else {
-    // 76 is currently an accepted padding value considering the spacing for resizer handle
-    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
-    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
-    // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
-  }
-  // Fix for HOT-119925: Ensure table width is properly constrained and responsive
-  // For wide tables, ensure they don't exceed container width and can be scrolled
-  var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
-
-  // Ensure minimum width for usability while respecting container constraints
-  var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
-  if (!isResizing) {
-    tableWidthRef.current = width;
-  }
-  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
-  var tableResizerProps = {
-    width: width,
-    maxWidth: maxResizerWidth,
-    containerWidth: containerWidth,
-    lineLength: lineLength,
-    updateWidth: updateWidth,
-    editorView: editorView,
-    getPos: getPos,
-    node: node,
-    tableRef: tableRef,
-    displayGuideline: displayGuideline,
-    attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor,
-    isTableAlignmentEnabled: isTableAlignmentEnabled,
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
-    isTableScalingEnabled: isTableScalingEnabled,
-    isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
-    isWholeTableInDanger: isWholeTableInDanger,
-    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-    pluginInjectionApi: pluginInjectionApi,
-    onResizeStart: onResizeStart,
-    onResizeStop: onResizeStop,
-    isCommentEditor: isCommentEditor
-  };
-  var isLivePageViewMode = mode === 'view';
-  return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
-    isTableAlignmentEnabled: isTableAlignmentEnabled,
-    node: node,
-    pluginInjectionApi: pluginInjectionApi,
-    getPos: getPos,
-    editorView: editorView
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: tableWidthRef.current,
-      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
-      position: isLivePageViewMode ? 'relative' : 'unset'
-    }
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
-    ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, (0, _extends2.default)({}, tableResizerProps, {
-    disabled: isLivePageViewMode
-  }), /*#__PURE__*/_react.default.createElement(InnerContainer, {
-    className: className,
-    node: node
-  }, children))));
-});
-var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_ref5) {
-  var children = _ref5.children,
-    className = _ref5.className,
-    node = _ref5.node,
-    containerWidth = _ref5.containerWidth,
-    lineLength = _ref5.lineLength,
-    editorView = _ref5.editorView,
-    getPos = _ref5.getPos,
-    tableRef = _ref5.tableRef,
-    isResizing = _ref5.isResizing,
-    pluginInjectionApi = _ref5.pluginInjectionApi,
-    tableWrapperHeight = _ref5.tableWrapperHeight,
-    isWholeTableInDanger = _ref5.isWholeTableInDanger,
-    isTableScalingEnabled = _ref5.isTableScalingEnabled,
-    isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
-    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref5.isCommentEditor,
-    isChromelessEditor = _ref5.isChromelessEditor;
-  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
-  var containerRef = (0, _react.useRef)(null);
-  var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    resizing = _useState4[0],
-    setIsResizing = _useState4[1];
-  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['table', 'editorViewMode'], selector),
-    tableState = _useSharedPluginState3.tableState,
-    editorViewModeState = _useSharedPluginState3.editorViewModeState;
-  var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
-  var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-  var updateContainerHeight = (0, _react.useCallback)(function (height) {
-    var _containerRef$current3;
-    // current StickyHeader State is not stable to be fetch.
-    // we need to update stickyHeader plugin to make sure state can be
-    //    consistently fetch and refactor below
-    var stickyHeaders = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByClassName('pm-table-sticky');
-    if (!stickyHeaders || stickyHeaders.length < 1) {
-      // when starting to drag, we need to keep the original space,
-      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
-      //    1px is border width but collapse make it 0.5.
-      // -- When sticky header appear, we should add first row height but reduce
-      //    collapsed border
-      return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
-    } else {
-      var _containerRef$current4;
-      var stickyHeaderHeight = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
-      return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
-    }
-  }, []);
-  var onResizeStart = (0, _react.useCallback)(function () {
-    setIsResizing(true);
-  }, []);
-  var onResizeStop = (0, _react.useCallback)(function () {
-    setIsResizing(false);
-  }, []);
-  var updateWidth = (0, _react.useCallback)(function (width) {
-    if (!containerRef.current) {
-      return;
-    }
-
-    // make sure during resizing
-    // the pm-table-resizer-container width is the same as its child div resizer-item
-    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
-    // and cause the fabric-editor-popup-scroll-parent to overflow
-    if (containerRef.current.style.width !== "".concat(width, "px")) {
-      containerRef.current.style.width = "".concat(width, "px");
-    }
-  }, []);
-  var displayGuideline = (0, _react.useCallback)(function (guidelines) {
-    var _pluginInjectionApi$g3, _pluginInjectionApi$g4;
-    return (_pluginInjectionApi$g3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g4 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g4 === void 0 || (_pluginInjectionApi$g4 = _pluginInjectionApi$g4.actions) === null || _pluginInjectionApi$g4 === void 0 ? void 0 : _pluginInjectionApi$g4.displayGuideline(editorView)({
-      guidelines: guidelines
-    })) !== null && _pluginInjectionApi$g3 !== void 0 ? _pluginInjectionApi$g3 : false;
-  }, [pluginInjectionApi, editorView]);
-  var attachAnalyticsEvent = (0, _react.useCallback)(function (payload) {
-    var _pluginInjectionApi$a3;
-    return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent(payload);
-  }, [pluginInjectionApi]);
-  var displayGapCursor = (0, _react.useCallback)(function (toggle) {
-    var _pluginInjectionApi$c3, _pluginInjectionApi$c4, _pluginInjectionApi$s2;
-    return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
-  }, [pluginInjectionApi]);
   var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
   var _useMemo = (0, _react.useMemo)(function () {
       var responsiveContainerWidth = 0;
@@ -519,32 +339,28 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
     node: node
   }, children))));
 });
-var ResizableTableContainer = exports.ResizableTableContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true);
-}, ResizableTableContainerNext, ResizableTableContainerLegacy);
-var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
-  var _node$attrs$width;
-  var children = _ref6.children,
-    node = _ref6.node,
-    className = _ref6.className,
-    _ref6$containerWidth = _ref6.containerWidth,
-    editorWidth = _ref6$containerWidth.width,
-    lineLength = _ref6$containerWidth.lineLength,
-    editorView = _ref6.editorView,
-    getPos = _ref6.getPos,
-    tableRef = _ref6.tableRef,
-    isNested = _ref6.isNested,
-    tableWrapperHeight = _ref6.tableWrapperHeight,
-    isResizing = _ref6.isResizing,
-    pluginInjectionApi = _ref6.pluginInjectionApi,
-    isWholeTableInDanger = _ref6.isWholeTableInDanger,
-    isTableResizingEnabled = _ref6.isTableResizingEnabled,
-    isTableScalingEnabled = _ref6.isTableScalingEnabled,
-    isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
-    isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref6.isCommentEditor,
-    isChromelessEditor = _ref6.isChromelessEditor;
+var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
+  var children = _ref5.children,
+    node = _ref5.node,
+    className = _ref5.className,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
+    editorView = _ref5.editorView,
+    getPos = _ref5.getPos,
+    tableRef = _ref5.tableRef,
+    isNested = _ref5.isNested,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
+    isResizing = _ref5.isResizing,
+    pluginInjectionApi = _ref5.pluginInjectionApi,
+    isWholeTableInDanger = _ref5.isWholeTableInDanger,
+    isTableResizingEnabled = _ref5.isTableResizingEnabled,
+    isTableScalingEnabled = _ref5.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
+    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
+    shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref5.isCommentEditor,
+    isChromelessEditor = _ref5.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -577,7 +393,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
   var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
-  var resizableTableWidth = (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? isFullPageAppearance ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))" : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : '100%', ")");
+  var resizableTableWidth = isFullPageAppearance ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {
     node: node
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766