@atlaskit/editor-plugin-table 15.2.1 → 15.2.3

package/dist/cjs/nodeviews/TableResizer.js

@@ -418,15 +418,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   }, [editorView, getPos, node, isCommentEditor, widthToWidest, isToolbarAIFCEnabled, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
-    if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-      if (newWidth < resizerMinWidth) {
-        return;
-      }
-    } else {
-      // maxWidth when platform_editor_tables_scaling_css off is always a number
-      if (newWidth > maxWidth || newWidth < resizerMinWidth) {
-        return;
-      }
+    if (newWidth < resizerMinWidth) {
+      return;
     }
     handleResizeStop({
       width: width,
@@ -437,13 +430,14 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       width: step,
       height: 0
     });
-  }, [width, handleResizeStop, maxWidth, resizerMinWidth]);
+  }, [width, handleResizeStop, resizerMinWidth]);
   var handleEscape = (0, _react.useCallback)(function () {
     editorView === null || editorView === void 0 || editorView.focus();
   }, [editorView]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
-    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
     if (event.altKey || metaKey || event.shiftKey) {
       areResizeMetaKeysPressed.current = true;
     }
@@ -468,7 +462,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
     var globalKeyDownHandler = function globalKeyDownHandler(event) {
-      var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+      var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
       if (!isTableSelected) {
         return;
       }

package/dist/cjs/nodeviews/table.js

@@ -20,7 +20,6 @@ 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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
@@ -149,7 +148,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         if (this.view.state.selection.visible) {
           selectionBookmark = this.view.state.selection.getBookmark();
         }
-        if (this.dom && (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+        if (this.dom) {
           this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
           this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(this.node.attrs.localId));
         }

package/dist/cjs/nodeviews/toDOM.js

@@ -11,9 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
@@ -24,16 +22,6 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
-      var _node$attrs$width;
-      var gutterPadding = function gutterPadding() {
-        if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
-          exposure: true
-        })) {
-          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
-        } else {
-          return "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, "px");
-        }
-      };
       var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
           k = _ref2[0],
@@ -41,29 +29,23 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
       var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
-      var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
       var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
-      var attrs = _objectSpread({
+      var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
-      }, (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && {
+        'data-table-width': node.attrs.width,
         'data-ssr-placeholder': "table-".concat(node.attrs.localId),
         'data-ssr-placeholder-replace': "table-".concat(node.attrs.localId)
-      });
+      };
 
       // This would be used for table scaling in colgroup CSS
       // cqw, or px is well supported
-      var resizableTableWidth = (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.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 = isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
       var colgroup = '';
       if (config.allowColumnResizing) {
-        if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-          colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
-        } else {
-          colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroup)(node)));
-        }
+        colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
       }
 
       // For Chromeless editor, and nested tables in full page editor
@@ -112,7 +94,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         'data-testid': 'sticky-sentinel-bottom'
       }]];
       var tableContainerDiv = (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
-      if (!config.tableResizingEnabled || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested) {
+      if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',
           'data-prosemirror-initial-toDOM-render': 'true',
@@ -129,7 +111,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         style: (0, _lazyNodeView.convertToInlineCss)({
           '--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
           '--ak-editor-table-width': resizableTableWidth,
-          width: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "var(--ak-editor-table-width)" : "min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ")")
+          width: "var(--ak-editor-table-width)"
         })
       }, ['div', {
         class: 'resizer-item display-handle',
@@ -140,8 +122,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
-          maxWidth: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
+          maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
+          width: (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor)
         })
       }, ['span', {
         class: 'resizer-hover-zone'

package/dist/cjs/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDragBehaviour = void 0;
 var _browser = require("@atlaskit/editor-common/browser");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var getDragBehaviour = exports.getDragBehaviour = function getDragBehaviour(_ref) {
   var altKey = _ref.altKey,
     ctrlKey = _ref.ctrlKey;
-  var isCloneModifierKeyPressed = _browser.browser.mac ? altKey : ctrlKey;
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+  var isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
   return isCloneModifierKeyPressed ? 'clone' : 'move';
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _transforms = require("@atlaskit/editor-common/transforms");
@@ -61,36 +62,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     return editorView.state;
   };
   var getNodeView = function getNodeView() {
-    // Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
-    if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-      return {
-        table: (0, _tableNodeViews.tableView)({
-          portalProviderAPI: portalProviderAPI,
-          eventDispatcher: eventDispatcher,
-          getEditorContainerWidth: getEditorContainerWidth,
-          getEditorFeatureFlags: getEditorFeatureFlags,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          pluginInjectionApi: pluginInjectionApi,
-          isCommentEditor: isCommentEditor,
-          isChromelessEditor: isChromelessEditor
-        }),
-        tableRow: (0, _tableNodeViews.tableRowView)({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        }),
-        tableCell: (0, _tableNodeViews.tableCellView)({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        }),
-        tableHeader: (0, _tableNodeViews.tableHeaderView)({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        })
-      };
-    }
-    if ((0, _coreUtils.isSSR)()) {
-      return undefined;
-    }
     return {
       table: (0, _tableNodeViews.tableView)({
         portalProviderAPI: portalProviderAPI,
@@ -283,6 +254,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
         var decorationSet = _plugin.pluginKey.getState(state);
+        var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
         if ((0, _decoration.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         }
@@ -290,7 +262,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         // ED-6069: workaround for Chrome given a regression introduced in prosemirror-view@1.6.8
         // Returning true prevents that updateSelection() is getting called in the commit below:
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
-        if (_utils.browser.chrome && event.target) {
+        if (browser.chrome && event.target) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           var targetClassList = event.target.classList;

package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("../../utils/analytics");
 var _colgroup = require("./colgroup");
 var _columnState = require("./column-state");
@@ -102,7 +101,7 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 
 // updates Colgroup DOM node with new widths
 var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled, scalePercent) {
-  var cols = (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col') : tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
+  var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col');
   var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
       updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.

package/dist/cjs/tablePlugin.js

@@ -469,10 +469,11 @@ var tablePlugin = function tablePlugin(_ref) {
           return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
         }
       }];
+      var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
       // https://github.com/ProseMirror/prosemirror/issues/934
-      if (_browser.browser.safari) {
+      if (browser.safari) {
         plugins.push({
           name: 'tableSafariDeleteCompositionTextIssueWorkaround',
           plugin: function plugin() {

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

@@ -118,6 +118,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   };
   (0, _react.useEffect)(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;
+    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
     if (dragHandleDivRefCurrent) {
       return (0, _adapter.draggable)({
         element: dragHandleDivRefCurrent,
@@ -137,7 +138,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
             getOffset: function getOffset(_ref3) {
               var container = _ref3.container;
               var rect = container.getBoundingClientRect();
-              if (_browser.browser.safari) {
+              if (browser.safari) {
                 // See: https://product-fabric.atlassian.net/browse/ED-21442
                 // We need to ensure that the preview is not overlaying screen content when the snapshot is taken, otherwise
                 // safari will composite the screen text elements into the bitmap snapshot. The container is a wrapper which is already
@@ -172,6 +173,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -248,7 +250,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  _browser.browser.gecko ?
+  browser.gecko ?
   /*#__PURE__*/
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -17,14 +17,11 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
 var _consts = require("../../consts");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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
@@ -113,7 +110,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         tableActive = _this$props5.tableActive,
         updateCellHoverLocation = _this$props5.updateCellHoverLocation;
       var rowHeights = (0, _rowControls.getRowHeights)(tableRef);
-      if ((0, _coreUtils.isSSR)() && (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+      if ((0, _coreUtils.isSSR)()) {
         return /*#__PURE__*/_react.default.createElement("div", {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className: _types.TableCssClassName.NUMBERED_COLUMN,
@@ -132,15 +129,15 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.NUMBERED_COLUMN,
-        style: _objectSpread({
+        style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
           borderLeft:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined
-        }, (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? {
+          isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           visibility: 'visible'
-        } : {}),
+        },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
         return isDragAndDropEnabled ?

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../pm-plugins/commands");
 var _nodes = require("../../pm-plugins/utils/nodes");
 var _types = require("../../types");
@@ -42,7 +43,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
   var _selectRow = (0, _react.useCallback)(function (row, expand) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    if (_browser.browser.ie_version === 11) {
+    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+    if (browser.ie_version === 11) {
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       editorView.dom.blur();
@@ -52,7 +54,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
   var _selectRows = (0, _react.useCallback)(function (rowIndexes) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    if (_browser.browser.ie_version === 11) {
+    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+    if (browser.ie_version === 11) {
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       editorView.dom.blur();

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

@@ -56,12 +56,13 @@ var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeader
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
 };
 var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
   /*
      This is MAGIC!
      This fixes a bug which occurs in firefox when the first row becomes sticky.
      see https://product-fabric.atlassian.net/browse/ED-19177
    */
-  if (_browser.browser.gecko) {
+  if (browser.gecko) {
     return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), _types.TableCssClassName.TABLE_STICKY);
   }
 };

package/dist/es2019/nodeviews/TableComponentLegacy.js

@@ -5,12 +5,13 @@ import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -39,7 +40,6 @@ import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-const isIE11 = 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.
@@ -364,7 +364,7 @@ class TableComponent extends React.Component {
         isFullWidthModeAndLineLengthChanged
       } = params;
       const 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 (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;
@@ -435,10 +435,8 @@ class TableComponent extends React.Component {
           }
         }
       });
-      if (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);
     }
   }
   initialiseEventListenersAfterMount() {
@@ -448,10 +446,10 @@ class TableComponent extends React.Component {
       allowTableResizing,
       eventDispatcher,
       isDragAndDropEnabled,
-      getNode,
-      getEditorFeatureFlags,
-      isTableScalingEnabled
+      getNode
     } = this.props;
+    const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+    const isIE11 = browser.ie_version === 11;
 
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -464,17 +462,6 @@ class TableComponent extends React.Component {
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
     this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
-    const {
-      tableWithFixedColumnWidthsOption = false
-    } = getEditorFeatureFlags();
-    if (!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(entries => {
         for (const entry of entries) {
@@ -535,6 +522,8 @@ class TableComponent extends React.Component {
       view,
       isInDanger
     } = this.props;
+    const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+    const 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
@@ -569,10 +558,9 @@ class TableComponent extends React.Component {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
-    if (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
@@ -659,7 +647,7 @@ class TableComponent extends React.Component {
     } = containerWidth;
     const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
     const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
-    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
+    const 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;
       const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
@@ -774,7 +762,7 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+    if (this.state.windowResized) {
       shouldHandleColgroupUpdates = true;
     }
     if (shouldHandleColgroupUpdates) {

package/dist/es2019/nodeviews/TableComponentNext.js

@@ -3,11 +3,12 @@ import React from 'react';
 import classnames from 'classnames';
 import rafSchedule from 'raf-schd';
 import { injectIntl } from 'react-intl-next';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -34,8 +35,6 @@ import TableFloatingControls from '../ui/TableFloatingControls';
 import { ExternalDropTargets } from './ExternalDropTargets';
 import { TableContainer } from './TableContainer';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-const isIE11 = browser.ie_version === 11;
-
 // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
 const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
 const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
@@ -297,7 +296,7 @@ class TableComponent extends React.Component {
         isFullWidthModeAndLineLengthChanged
       } = params;
       const 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 (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;
@@ -366,10 +365,9 @@ class TableComponent extends React.Component {
           }
         }
       });
-      if (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);
     }
   }
   initialiseEventListenersAfterMount() {
@@ -379,10 +377,10 @@ class TableComponent extends React.Component {
       allowTableResizing,
       eventDispatcher,
       isDragAndDropEnabled,
-      getNode,
-      getEditorFeatureFlags,
-      isTableScalingEnabled
+      getNode
     } = this.props;
+    const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+    const isIE11 = browser.ie_version === 11;
 
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -395,17 +393,6 @@ class TableComponent extends React.Component {
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
     this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
-    const {
-      tableWithFixedColumnWidthsOption = false
-    } = getEditorFeatureFlags();
-    if (!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(entries => {
         for (const entry of entries) {
@@ -462,6 +449,8 @@ class TableComponent extends React.Component {
       view,
       isInDanger
     } = this.props;
+    const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+    const 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
@@ -496,10 +485,9 @@ class TableComponent extends React.Component {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
-    if (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
@@ -583,7 +571,7 @@ class TableComponent extends React.Component {
     } = containerWidth;
     const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
     const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
-    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
+    const 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;
       const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
@@ -698,7 +686,7 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+    if (this.state.windowResized) {
       shouldHandleColgroupUpdates = true;
     }
     if (shouldHandleColgroupUpdates) {