@atlaskit/editor-plugin-table 5.3.38 → 5.4.0

package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -11,7 +11,7 @@ import {
   selectTable,
 } from '@atlaskit/editor-tables/utils';
 
-import { clearHoverSelection, hoverTable } from '../../../commands';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 
 import type { CornerControlProps } from './types';
@@ -26,11 +26,6 @@ const DragCornerControlsComponent = ({
     dispatch(selectTable(state.tr).setMeta('addToHistory', false));
   };
 
-  const handleMouseOver = () => {
-    const { state, dispatch } = editorView;
-    hoverTable()(state, dispatch);
-  };
-
   const handleMouseOut = () => {
     const { state, dispatch } = editorView;
     clearHoverSelection()(state, dispatch);
@@ -54,7 +49,6 @@ const DragCornerControlsComponent = ({
       aria-label={formatMessage(messages.cornerControl)}
       type="button"
       onClick={handleOnClick}
-      onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       contentEditable={false}
     >

package/src/plugins/table/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -33,6 +33,7 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
           data.indexes?.indexOf(index) === -1
         );
       },
+      getIsSticky: () => true,
       getData({ input, element }) {
         const data = {
           localId,

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

@@ -5,6 +5,7 @@ import {
   tableSharedStyle,
 } from '@atlaskit/editor-common/styles';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import { browser } from '@atlaskit/editor-common/utils';
 import {
   akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
@@ -246,6 +247,26 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
+const tableStickyHeaderFirefoxFixStyle = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  /*
+    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.gecko &&
+    getBooleanFF('platform.editor.table.alternative-sticky-header-logic')
+  ) {
+    return css`
+      .${ClassName.TABLE_STICKY} > tbody::before {
+        content: '';
+      }
+    `;
+  }
+};
+
 const tableRowControlStyles = () => {
   return getBooleanFF('platform.editor.table.drag-and-drop')
     ? css`
@@ -402,6 +423,8 @@ export const tableStyles = (
 
     ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
 
+    ${tableStickyHeaderFirefoxFixStyle(props)}
+
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
       .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {

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

@@ -222,16 +222,15 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
 
 export const dragCornerControlButton = (props: ThemeProps) => css`
   .${ClassName.DRAG_CORNER_BUTTON} {
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-end;
+    align-items: flex-end;
     position: absolute;
-    top: ${token('space.negative.075', '-6px')};
-    left: ${token('space.075', '6px')};
-    background-color: ${token('elevation.surface', '#FFF')};
-    border-radius: 50%;
+    top: ${token('space.negative.250', '-20px')};
+    left: ${token('space.negative.100', '-8px')};
+    background-color: transparent;
     border: none;
     padding: 0;
     outline: none;
@@ -239,24 +238,38 @@ export const dragCornerControlButton = (props: ThemeProps) => css`
 
     &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
       background-color: ${token('color.border.selected', '#0C66E4')};
-      border-color: ${token('color.border.selected', '#0C66E4')};
+      width: 10px;
+      height: 10px;
+      border-width: 2px;
+      border-radius: 4px;
+      top: ${token('space.075', '6px')};
+      left: ${token('space.075', '6px')};
     }
 
     &:hover {
       cursor: pointer;
 
       .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-        border-color: ${token('color.border.selected', '#0C66E4')};
+        width: 10px;
+        height: 10px;
+        border-width: 2px;
+        border-radius: 4px;
+        top: ${token('space.075', '6px')};
+        left: ${token('space.075', '6px')};
       }
     }
   }
 
   .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-    border: 1px solid
-      ${token('color.background.accent.gray.subtler', '#DCDFE4')};
-    border-radius: 50%;
-    width: 6px;
-    height: 6px;
+    border: 1px solid ${token('color.border.inverse', '#FFF')};
+    background-color: ${token(
+      'color.background.accent.gray.subtler',
+      '#DCDFE4',
+    )};
+    border-radius: 2px;
+    width: 5px;
+    height: 5px;
+    position: relative;
   }
 `;
 
@@ -384,16 +397,24 @@ export const OverflowShadow = (props: ThemeProps) => css`
         }px)`};
   }
   .${ClassName.WITH_CONTROLS} {
-    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTopWithControl}px);
-      top: ${tableMarginTopWithControl}px;
-    }
+    ${overflowShadowWidhoutDnD()}
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
 `;
 
+const overflowShadowWidhoutDnD = () => {
+  if (!getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return css`
+      .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
+        height: calc(100% - ${tableMarginTopWithControl}px);
+        top: ${tableMarginTopWithControl}px;
+      }
+    `;
+  }
+};
+
 const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`