@atlaskit/editor-plugin-table 2.6.10 → 2.6.12

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.12
+
+### Patch Changes
+
+- [`08bae0f0926`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08bae0f0926) - [ux] When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+  toggling side-effects because the intersection observers gets confused and ends up toggling the sticky header on when it should
+  be off and vice-versa.
+
+  This is due to their positioning using css relative top & bottom respectively. A row is only ~44px height and the bottom sentinel is
+  positioned ~67px off the bottom, and the top sentinel is ~25px off the top (which aligns to the top of the row).
+  So when only 1 row exist the bottom sentinel ends up being ~23px above the top sentinel. Which means the logic for
+  toggling becomes inverted and when the sentinels are scrolled off the screen the top on is now last and ends up displaying the
+  sticky header, where previously the bottom sentinel would hide it.
+
+- Updated dependencies
+
+## 2.6.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.10
 
 ### Patch Changes

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -445,6 +445,11 @@ var TableRowNodeView = /*#__PURE__*/function () {
           return;
         }
         var table = _this4.tree.table;
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
         entries.forEach(function (entry) {
           var _entry$rootBounds;
           var target = entry.target;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.10",
+	"version": "2.6.12",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -417,6 +417,11 @@ export class TableRowNodeView {
       const {
         table
       } = this.tree;
+      if (table.rows.length < 2) {
+        // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+        // toggling side-effects because the intersection observers gets confused.
+        return;
+      }
       entries.forEach(entry => {
         var _entry$rootBounds;
         const target = entry.target;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.10",
+	"version": "2.6.12",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -438,6 +438,11 @@ export var TableRowNodeView = /*#__PURE__*/function () {
           return;
         }
         var table = _this4.tree.table;
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
         entries.forEach(function (entry) {
           var _entry$rootBounds;
           var target = entry.target;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.10",
+	"version": "2.6.12",
 	"sideEffects": false
 }

package/examples/99-testing.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { IntlProvider } from 'react-intl-next';
 
 import Button from '@atlaskit/button/standard-button';
+import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import {
   createEditorExampleForTests,
   mapProvidersToProps,
@@ -11,7 +12,6 @@ import { getDefaultLinkPickerOptions } from '@atlaskit/editor-core/example-helpe
 import { TitleInput } from '@atlaskit/editor-core/example-helpers/PageElements';
 import { SaveAndCancelButtons } from '@atlaskit/editor-core/examples/5-full-page';
 import { ContextPanel, Editor } from '@atlaskit/editor-core/src';
-import { CollabEditOptions } from '@atlaskit/editor-core/src/plugins/collab-edit';
 import { customInsertMenuItems } from '@atlaskit/editor-test-helpers/mock-insert-menu';
 import { SmartCardProvider } from '@atlaskit/link-provider';
 import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.10",
+  "version": "2.6.12",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^27.0.0",
-    "@atlaskit/editor-common": "^74.36.0",
+    "@atlaskit/adf-schema": "^28.0.0",
+    "@atlaskit/editor-common": "^74.38.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
@@ -59,7 +59,7 @@
     "@atlaskit/editor-plugin-feature-flags": "^0.1.3",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
     "@atlaskit/editor-plugin-guideline": "^0.3.4",
-    "@atlaskit/editor-plugin-hyperlink": "^0.2.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.3.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/visual-regression": "*",

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -285,6 +285,13 @@ export class TableRowNodeView implements NodeView {
           return;
         }
         const { table } = this.tree;
+
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
+
         entries.forEach((entry) => {
           const target = entry.target as HTMLElement;