@atlaskit/editor-plugin-table 10.1.4 → 10.2.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-table
 
+## 10.2.1
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
+## 10.2.0
+
+### Minor Changes
+
+- [#119765](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119765)
+  [`5a27b842be965`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a27b842be965) -
+  Add deprecated label to `forceStaticToolbar` in floating toolbar property and remove its usage
+  across plugins
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.1.4
 
 ### Patch Changes

package/commands/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/pm-plugins/commands/index.js",
   "module": "../dist/esm/pm-plugins/commands/index.js",
   "module:es2019": "../dist/es2019/pm-plugins/commands/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/pm-plugins/commands/index.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/nodeviews/TableComponent.js

@@ -344,6 +344,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
+    var tablePos = props.getPos();
+    _this.isNestedInTable = tablePos && (0, _platformFeatureFlags.fg)('nested_table_control_padding_with_css') ? (0, _nesting.getParentOfTypeCount)(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(tablePos)) > 0 : false;
     _this.isInitialOverflowSent = false;
     if (!_this.updateColGroupFromFullWidthChange) {
       _this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
@@ -449,8 +451,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        if (this.table) {
-          this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
+        if ((0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables')) {
+          if (this.table && !this.isNestedInTable) {
+            this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
+          }
+        } else {
+          if (this.table) {
+            this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
+          }
         }
         if (isDragAndDropEnabled) {
           this.dragAndDropCleanupFn = _combine.combine.apply(void 0, (0, _toConsumableArray2.default)((0, _autoscrollers.autoScrollerFactory)({
@@ -930,7 +938,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tablePos = undefined;
       }
       var isNested = (0, _nodes.isTableNested)(view.state, tablePos);
-      var isNestedInTable = tablePos && (0, _platformFeatureFlags.fg)('nested_table_control_padding_with_css') ? (0, _nesting.getParentOfTypeCount)(view.state.schema.nodes.table)(view.state.doc.resolve(tablePos)) > 0 : false;
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
       var topOffset = 0;
       var topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
@@ -941,7 +948,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && isNestedInTable)),
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
         editorView: view,
         getPos: getPos,
         node: node
@@ -966,7 +973,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
+      }) : /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
@@ -1012,7 +1023,31 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }, allowControls && colControls), /*#__PURE__*/_react.default.createElement("div", {
+      }, allowControls && colControls), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          display: 'none',
+          // prevent unwanted scroll during table resize without removing scrollbar container from the dom
+          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      })) : /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      }) : /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
@@ -1057,7 +1092,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }) : /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"

package/dist/cjs/nodeviews/TableStickyScrollbar.js

@@ -115,11 +115,9 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.item(0);
       [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
-        return (
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          _this2.intersectionObserver.observe(el)
-        );
+        if (el !== null && _this2.intersectionObserver) {
+          _this2.intersectionObserver.observe(el);
+        }
       });
     }
   }, {

package/dist/cjs/ui/toolbar.js

@@ -464,7 +464,6 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          forceStaticToolbar: true,
           items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(alignmentMenu), [separator(alignmentMenu.length === 0)], (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), [
           // TODO: editor controls to move to overflow menu
           {

package/dist/es2019/nodeviews/TableComponent.js

@@ -344,6 +344,8 @@ class TableComponent extends React.Component {
     } = props;
     this.node = _getNode();
     this.containerWidth = _containerWidth;
+    const tablePos = props.getPos();
+    this.isNestedInTable = tablePos && fg('nested_table_control_padding_with_css') ? getParentOfTypeCount(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(tablePos)) > 0 : false;
     this.isInitialOverflowSent = false;
     if (!this.updateColGroupFromFullWidthChange) {
       this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
@@ -423,8 +425,14 @@ class TableComponent extends React.Component {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true
       });
-      if (this.table) {
-        this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+      if (fg('disable-sticky-scrollbar-for-nested-tables')) {
+        if (this.table && !this.isNestedInTable) {
+          this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+        }
+      } else {
+        if (this.table) {
+          this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+        }
       }
       if (isDragAndDropEnabled) {
         this.dragAndDropCleanupFn = combine(...autoScrollerFactory({
@@ -900,7 +908,6 @@ class TableComponent extends React.Component {
       tablePos = undefined;
     }
     const isNested = isTableNested(view.state, tablePos);
-    const isNestedInTable = tablePos && fg('nested_table_control_padding_with_css') ? getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(tablePos)) > 0 : false;
     const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
     const topOffset = 0;
     const topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
@@ -916,7 +923,7 @@ class TableComponent extends React.Component {
         [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
         [ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
         [ClassName.TABLE_SELECTED]: isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection),
-        [ClassName.NESTED_TABLE_WITH_CONTROLS]: tableActive && allowControls && isNestedInTable
+        [ClassName.NESTED_TABLE_WITH_CONTROLS]: tableActive && allowControls && this.isNestedInTable
       }),
       editorView: view,
       getPos: getPos,
@@ -942,7 +949,11 @@ class TableComponent extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"
-    }), /*#__PURE__*/React.createElement("div", {
+    }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+      "data-testid": "sticky-scrollbar-sentinel-top"
+    }) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
       "data-testid": "sticky-scrollbar-sentinel-top"
@@ -988,7 +999,31 @@ class TableComponent extends React.Component {
           }
         }
       }
-    }, allowControls && colControls), /*#__PURE__*/React.createElement("div", {
+    }, allowControls && colControls), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: "var(--ds-space-250, 20px)",
+        // MAX_BROWSER_SCROLLBAR_HEIGHT
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        display: 'none',
+        // prevent unwanted scroll during table resize without removing scrollbar container from the dom
+        width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: '100%'
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: '100%'
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       style: {
@@ -1033,7 +1068,11 @@ class TableComponent extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
       "data-testid": "sticky-sentinel-bottom"
-    }), /*#__PURE__*/React.createElement("div", {
+    }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+      "data-testid": "sticky-scrollbar-sentinel-bottom"
+    }) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
       "data-testid": "sticky-scrollbar-sentinel-bottom"

package/dist/es2019/nodeviews/TableStickyScrollbar.js

@@ -92,10 +92,11 @@ export class TableStickyScrollbar {
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : (_this$wrapper3$parent2 = _this$wrapper3$parent.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3$parent2 === void 0 ? void 0 : _this$wrapper3$parent2.item(0);
-    [this.sentinels.bottom, this.sentinels.top].forEach(el =>
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.intersectionObserver.observe(el));
+    [this.sentinels.bottom, this.sentinels.top].forEach(el => {
+      if (el !== null && this.intersectionObserver) {
+        this.intersectionObserver.observe(el);
+      }
+    });
   }
   deleteIntersectionObserver() {
     if (this.intersectionObserver) {

package/dist/es2019/ui/toolbar.js

@@ -436,7 +436,6 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      forceStaticToolbar: true,
       items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker,
       // TODO: editor controls to move to overflow menu
       {

package/dist/esm/nodeviews/TableComponent.js

@@ -338,6 +338,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
+    var tablePos = props.getPos();
+    _this.isNestedInTable = tablePos && fg('nested_table_control_padding_with_css') ? getParentOfTypeCount(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(tablePos)) > 0 : false;
     _this.isInitialOverflowSent = false;
     if (!_this.updateColGroupFromFullWidthChange) {
       _this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
@@ -443,8 +445,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        if (this.table) {
-          this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+        if (fg('disable-sticky-scrollbar-for-nested-tables')) {
+          if (this.table && !this.isNestedInTable) {
+            this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+          }
+        } else {
+          if (this.table) {
+            this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+          }
         }
         if (isDragAndDropEnabled) {
           this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
@@ -924,7 +932,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tablePos = undefined;
       }
       var isNested = isTableNested(view.state, tablePos);
-      var isNestedInTable = tablePos && fg('nested_table_control_padding_with_css') ? getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(tablePos)) > 0 : false;
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
       var topOffset = 0;
       var topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
@@ -935,7 +942,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection)), ClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && isNestedInTable)),
+        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection)), ClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
         editorView: view,
         getPos: getPos,
         node: node
@@ -960,7 +967,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), /*#__PURE__*/React.createElement("div", {
+      }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
+      }) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
@@ -1006,7 +1017,31 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }, allowControls && colControls), /*#__PURE__*/React.createElement("div", {
+      }, allowControls && colControls), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          display: 'none',
+          // prevent unwanted scroll during table resize without removing scrollbar container from the dom
+          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      })) : /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      }) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
@@ -1051,7 +1086,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
-      }), /*#__PURE__*/React.createElement("div", {
+      }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"

package/dist/esm/nodeviews/TableStickyScrollbar.js

@@ -108,11 +108,9 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.item(0);
       [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
-        return (
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          _this2.intersectionObserver.observe(el)
-        );
+        if (el !== null && _this2.intersectionObserver) {
+          _this2.intersectionObserver.observe(el);
+        }
       });
     }
   }, {

package/dist/esm/ui/toolbar.js

@@ -456,7 +456,6 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          forceStaticToolbar: true,
           items: [menu, separator(menu.hidden)].concat(_toConsumableArray(alignmentMenu), [separator(alignmentMenu.length === 0)], _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), [
           // TODO: editor controls to move to overflow menu
           {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.1.4",
+	"version": "10.2.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -19,7 +19,9 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -30,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.2.1",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.0",
 		"@atlaskit/editor-palette": "2.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
@@ -177,6 +179,9 @@
 		"platform_editor_nested_tables_number_column_fixes": {
 			"type": "boolean"
 		},
+		"disable-sticky-scrollbar-for-nested-tables": {
+			"type": "boolean"
+		},
 		"platform_editor_nested_tables_sticky_header_bug": {
 			"type": "boolean"
 		},

package/plugin-key/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/pm-plugins/plugin-key.js",
   "module": "../dist/esm/pm-plugins/plugin-key.js",
   "module:es2019": "../dist/es2019/pm-plugins/plugin-key.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/pm-plugins/plugin-key.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/src/nodeviews/TableComponent.tsx

@@ -170,6 +170,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private stickyScrollbar?: TableStickyScrollbar;
 
 	private isInitialOverflowSent: boolean;
+	private isNestedInTable: boolean;
 	private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
 	private resizeObserver?: ResizeObserver;
 
@@ -186,6 +187,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		this.node = getNode();
 		this.containerWidth = containerWidth;
 
+		const tablePos = props.getPos();
+
+		this.isNestedInTable =
+			tablePos && fg('nested_table_control_padding_with_css')
+				? getParentOfTypeCount(props.view.state.schema.nodes.table)(
+						props.view.state.doc.resolve(tablePos),
+					) > 0
+				: false;
+
 		this.isInitialOverflowSent = false;
 
 		if (!this.updateColGroupFromFullWidthChange) {
@@ -293,8 +303,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				passive: true,
 			});
 
-			if (this.table) {
-				this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+			if (fg('disable-sticky-scrollbar-for-nested-tables')) {
+				if (this.table && !this.isNestedInTable) {
+					this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+				}
+			} else {
+				if (this.table) {
+					this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+				}
 			}
 
 			if (isDragAndDropEnabled) {
@@ -909,10 +925,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		}
 
 		const isNested = isTableNested(view.state, tablePos);
-		const isNestedInTable =
-			tablePos && fg('nested_table_control_padding_with_css')
-				? getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(tablePos)) > 0
-				: false;
 
 		const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
 		const topOffset = 0;
@@ -934,7 +946,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					[ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
 					[ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
 					[ClassName.TABLE_SELECTED]: isTableSelected(selection ?? view.state.selection),
-					[ClassName.NESTED_TABLE_WITH_CONTROLS]: tableActive && allowControls && isNestedInTable,
+					[ClassName.NESTED_TABLE_WITH_CONTROLS]:
+						tableActive && allowControls && this.isNestedInTable,
 				})}
 				editorView={view}
 				getPos={getPos}
@@ -961,11 +974,22 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					className={ClassName.TABLE_STICKY_SENTINEL_TOP}
 					data-testid="sticky-sentinel-top"
 				/>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
-					data-testid="sticky-scrollbar-sentinel-top"
-				/>
+				{fg('disable-sticky-scrollbar-for-nested-tables') ? (
+					!this.isNestedInTable && (
+						<div
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+							className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
+							data-testid="sticky-scrollbar-sentinel-top"
+						/>
+					)
+				) : (
+					<div
+						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+						className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
+						data-testid="sticky-scrollbar-sentinel-top"
+					/>
+				)}
+
 				{allowControls && rowControls}
 				{isDragAndDropEnabled && (
 					<ExternalDropTargets
@@ -1019,26 +1043,59 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				>
 					{allowControls && colControls}
 				</div>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
-					style={{
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-						height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-						display: 'none',
-						// prevent unwanted scroll during table resize without removing scrollbar container from the dom
-						width: isResizing ? token('space.0', '0px') : '100%',
-					}}
-				>
+				{fg('disable-sticky-scrollbar-for-nested-tables') ? (
+					!this.isNestedInTable ? (
+						<div
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+							className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
+							style={{
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								display: 'none',
+								// prevent unwanted scroll during table resize without removing scrollbar container from the dom
+								width: isResizing ? token('space.0', '0px') : '100%',
+							}}
+						>
+							<div
+								style={{
+									width: tableRef?.clientWidth,
+									// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+									height: '100%',
+								}}
+							></div>
+						</div>
+					) : (
+						<div
+							style={{
+								width: tableRef?.clientWidth,
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								height: '100%',
+							}}
+						></div>
+					)
+				) : (
 					<div
+						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+						className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
 						style={{
-							width: tableRef?.clientWidth,
 							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-							height: '100%',
+							height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+							display: 'none',
+							// prevent unwanted scroll during table resize without removing scrollbar container from the dom
+							width: isResizing ? token('space.0', '0px') : '100%',
 						}}
-					></div>
-				</div>
+					>
+						<div
+							style={{
+								width: tableRef?.clientWidth,
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								height: '100%',
+							}}
+						></div>
+					</div>
+				)}
 				<div
 					contentEditable={false}
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -1070,16 +1127,27 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 						/>
 					</div>
 				)}
+
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 					className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
 					data-testid="sticky-sentinel-bottom"
 				/>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
-					data-testid="sticky-scrollbar-sentinel-bottom"
-				/>
+				{fg('disable-sticky-scrollbar-for-nested-tables') ? (
+					!this.isNestedInTable && (
+						<div
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+							className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
+							data-testid="sticky-scrollbar-sentinel-bottom"
+						/>
+					)
+				) : (
+					<div
+						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+						className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
+						data-testid="sticky-scrollbar-sentinel-bottom"
+					/>
+				)}
 			</TableContainer>
 		);
 	}

package/src/nodeviews/TableStickyScrollbar.ts

@@ -127,11 +127,11 @@ export class TableStickyScrollbar {
 			?.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)
 			?.item(0) as HTMLElement;
 
-		[this.sentinels.bottom, this.sentinels.top].forEach((el) =>
-			// Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			this.intersectionObserver!.observe(el),
-		);
+		[this.sentinels.bottom, this.sentinels.top].forEach((el) => {
+			if (el !== null && this.intersectionObserver) {
+				this.intersectionObserver.observe(el);
+			}
+		});
 	}
 
 	private deleteIntersectionObserver() {

package/src/ui/common-styles.ts

@@ -388,8 +388,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			border-right: 0 none;
 			/* top set by NumberColumn component */
 		}
-		`
-	}
+		`}
 
 	.${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
 		position: fixed !important;
@@ -541,8 +540,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
 			margin-top: ${tableControlsSpacing + 2}px;
 		}
-		`
-	}
+		`}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
 		border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
@@ -974,8 +972,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 				left: -1px;
 			}
 		}
-		`
-	}
+		`}
 
 	.${ClassName.WITH_CONTROLS} {
 		.${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {

package/src/ui/toolbar.tsx

@@ -639,7 +639,6 @@ export const getToolbarConfig =
 				offset: [0, 18],
 				absoluteOffset: { top: -6 },
 				zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
-				forceStaticToolbar: true,
 				items: [
 					menu,
 					separator(menu.hidden),

package/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/types/index.js",
   "module": "../dist/esm/types/index.js",
   "module:es2019": "../dist/es2019/types/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/types/index.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/ui/common-styles/package.json

@@ -3,7 +3,9 @@
   "main": "../../dist/cjs/ui/common-styles.js",
   "module": "../../dist/esm/ui/common-styles.js",
   "module:es2019": "../../dist/es2019/ui/common-styles.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../../dist/types/ui/common-styles.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/ui/consts/package.json

@@ -3,7 +3,9 @@
   "main": "../../dist/cjs/ui/consts.js",
   "module": "../../dist/esm/ui/consts.js",
   "module:es2019": "../../dist/es2019/ui/consts.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../../dist/types/ui/consts.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {