@atlaskit/editor-plugin-table 3.0.2 → 3.0.3

package/src/__tests__/visual-regression/index.ts

@@ -1,13 +1,16 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   scrollToBottom,
   scrollToElement,
 } from '@atlaskit/editor-test-helpers/page-objects/editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   initFullPageEditorWithAdf,
   snapshot,
 } from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
-import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import type { PuppeteerPage } from '@atlaskit/visual-regression/helper';
 
 import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
 

package/src/__tests__/visual-regression/sticky-header.ts

@@ -1,11 +1,14 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { scrollToElement } from '@atlaskit/editor-test-helpers/page-objects/editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   Appearance,
   initEditorWithAdf,
   snapshot,
 } from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
-import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import type { PuppeteerPage } from '@atlaskit/visual-regression/helper';
 
 import stickyHeaderWithHorizontalScroll from './__fixtures__/sticky-header-with-horizontal-scroll.json';
 

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

@@ -1,18 +1,19 @@
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { mapChildren } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { browser, mapChildren } from '@atlaskit/editor-common/utils';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 
+import type { TablePluginState } from '../../../types';
 import {
   TableCssClassName as ClassName,
   TableCssClassName,
-  TablePluginState,
 } from '../../../types';
 import {
+  STICKY_HEADER_TOGGLE_TOLERANCE_MS,
   stickyHeaderBorderBottomWidth,
   stickyRowOffsetTop,
   tableControlsSpacing,
@@ -25,7 +26,8 @@ import {
 } from '../../table-resizing/utils/dom';
 import { updateStickyState } from '../commands';
 
-import { getTop, getTree, TableDOMElements } from './dom';
+import type { TableDOMElements } from './dom';
+import { getTop, getTree } from './dom';
 
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -73,6 +75,7 @@ export class TableRowNodeView implements NodeView {
   focused = false;
   topPosEditorElement = 0;
   isSticky: boolean;
+  lastStickyTimestamp: number | undefined;
   lastTimePainted: number;
 
   private intersectionObserver?: IntersectionObserver;
@@ -104,6 +107,7 @@ export class TableRowNodeView implements NodeView {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
+    this.lastStickyTimestamp = undefined;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -257,6 +261,7 @@ export class TableRowNodeView implements NodeView {
             this.sentinels.bottom.style.bottom = `${
               tableScrollbarOffset + stickyRowOffsetTop + newHeight
             }px`;
+
             updateTableMargin(table);
           }
         }
@@ -293,6 +298,7 @@ export class TableRowNodeView implements NodeView {
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               this.tree &&
                 this.makeHeaderRowSticky(this.tree, entry.rootBounds?.top);
+              this.lastStickyTimestamp = Date.now();
             } else {
               table && this.makeRowHeaderNotSticky(table);
             }
@@ -306,12 +312,25 @@ export class TableRowNodeView implements NodeView {
               (entry.rootBounds?.top || 0);
 
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-              this.makeRowHeaderNotSticky(table);
+              // Not a perfect solution, but need to this code specific for FireFox ED-19177
+              if (browser.gecko) {
+                if (
+                  this.lastStickyTimestamp &&
+                  Date.now() - this.lastStickyTimestamp >
+                    STICKY_HEADER_TOGGLE_TOLERANCE_MS
+                ) {
+                  this.makeRowHeaderNotSticky(table);
+                }
+              } else {
+                this.makeRowHeaderNotSticky(table);
+              }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
               this.tree &&
                 this.makeHeaderRowSticky(this.tree, entry?.rootBounds?.top);
+              this.lastStickyTimestamp = Date.now();
             }
           }
+          return;
         });
       },
       { root: this.editorScrollableElement as Element },

package/src/plugins/table/pm-plugins/sticky-headers/util.ts

@@ -1,4 +1,4 @@
-import { StickyPluginState } from './types';
+import type { StickyPluginState } from './types';
 
 // only worry about the first row for now
 export const findStickyHeaderForTable = (

package/src/plugins/table/ui/consts.ts

@@ -8,6 +8,8 @@ import {
   akEditorTableBorderSelected,
   akEditorTableCellBlanketDeleted,
   akEditorTableCellBlanketSelected,
+  akEditorTableHeaderCellBackground,
+  akEditorTableHeaderCellBackgroundDark,
   akEditorTableToolbar,
   akEditorTableToolbarDark,
   akEditorTableToolbarSize,
@@ -42,10 +44,18 @@ export const tableCellBackgroundColor = themed({
   light: token('elevation.surface', N0),
   dark: token('elevation.surface', DN30),
 });
+
 export const tableHeaderCellBackgroundColor = themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark),
+  light: token(
+    'color.background.accent.gray.subtlest',
+    akEditorTableHeaderCellBackground,
+  ),
+  dark: token(
+    'color.background.accent.gray.subtlest',
+    akEditorTableHeaderCellBackgroundDark,
+  ),
 });
+
 export const tableToolbarColor = themed({
   light: token('color.background.neutral.subtle', akEditorTableToolbar),
   dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
@@ -135,3 +145,4 @@ export const tableOverflowShadowWidth = 8;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
+export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;

package/src/plugins/table/ui/ui-styles.ts

@@ -510,7 +510,7 @@ export const resizeHandle = (props: ThemeProps) => css`
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;
-      left: -2px;
+      left: ${token('space.negative.025', '-2px')};
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
@@ -520,7 +520,7 @@ export const resizeHandle = (props: ThemeProps) => css`
 
     th.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
-      left: -2px;
+      left: ${token('space.negative.025', '-2px')};
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);