@atlaskit/editor-plugin-table 5.4.4 → 5.4.5

package/src/__tests__/integration/__fixtures__/basic-table.ts

@@ -1,4 +1,4 @@
-export default {
+export const basicTableAdf = {
   version: 1,
   type: 'doc',
   content: [

package/src/plugins/table/types.ts

@@ -341,8 +341,8 @@ export const TableCssClassName = {
   HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
+  HOVERED_NO_HIGHLIGHT: `${tablePrefixSelector}-hovered-no-highlight`,
   HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
-  HOVERED_DISABLED_CELL: `${tablePrefixSelector}-hovered-disabled`,
   HOVERED_CELL_IN_DANGER: 'danger',
   HOVERED_CELL_ACTIVE: 'active',
   HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,

package/src/plugins/table/ui/DragHandle/HandleIconComponent.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {
+  DragHandleDisabledIcon,
+  DragHandleIcon,
+  MinimisedHandleIcon,
+} from '../icons';
+
+type HandleIconProps = {
+  hasMergedCells: boolean;
+  direction: 'row' | 'column';
+  isDragMenuOpen: boolean | undefined;
+  isRowHandleHovered: boolean;
+  isColumnHandleHovered: boolean;
+  isCurrentRowSelected: boolean;
+  isCurrentColumnSelected: boolean;
+  dragMenuDirection: 'row' | 'column' | undefined;
+};
+
+export const HandleIconComponent = (props: HandleIconProps) => {
+  const {
+    direction,
+    isDragMenuOpen,
+    isRowHandleHovered,
+    isColumnHandleHovered,
+    hasMergedCells,
+    isCurrentRowSelected,
+    isCurrentColumnSelected,
+    dragMenuDirection,
+  } = props;
+  const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
+  const isCurrentRowOrColumnSelected =
+    isCurrentRowSelected || isCurrentColumnSelected;
+  const isDragMenuOpenOnCurrentRowOrColumn =
+    isDragMenuOpen &&
+    dragMenuDirection === direction &&
+    isCurrentRowOrColumnSelected;
+
+  const showNormalHandle = hasMergedCells ? (
+    <DragHandleDisabledIcon />
+  ) : (
+    <DragHandleIcon />
+  );
+
+  // hoverred handle or open drag menu
+  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return showNormalHandle;
+  }
+
+  return <MinimisedHandleIcon />;
+};

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -14,11 +14,8 @@ import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
-import {
-  DragHandleDisabledIcon,
-  DragHandleIcon,
-  MinimisedHandleIcon,
-} from '../icons';
+
+import { HandleIconComponent } from './HandleIconComponent';
 
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
@@ -53,19 +50,26 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
-  const { isDragAndDropEnabled, hoveredColumns, hoveredRows } = getPluginState(
-    editorView.state,
-  );
+  const { isDragAndDropEnabled, hoveredColumns, hoveredRows, hoveredCell } =
+    getPluginState(editorView.state);
 
-  const { dragMenuDirection } = getDragDropPluginState(editorView.state);
+  const { dragMenuDirection, isDragMenuOpen, dragMenuIndex } =
+    getDragDropPluginState(editorView.state);
 
   const { selection } = editorView.state;
 
-  const isRowHovered = direction === 'row' && hoveredRows.length > 0;
-  const isColumnHovered = direction === 'column' && hoveredColumns.length > 0;
-  const isRowSelected = dragMenuDirection === 'row' && direction === 'row';
-  const isColumnSelected =
-    dragMenuDirection === 'column' && direction === 'column';
+  const isCurrentRowSelected =
+    isDragMenuOpen &&
+    direction === 'row' &&
+    hoveredCell.rowIndex === dragMenuIndex;
+  const isCurrentColumnSelected =
+    isDragMenuOpen &&
+    direction === 'column' &&
+    hoveredCell.colIndex === dragMenuIndex;
+
+  const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
+  const isColumnHandleHovered =
+    direction === 'column' && hoveredColumns.length > 0;
 
   const hasMergedCells = useMemo(
     () =>
@@ -75,6 +79,17 @@ export const DragHandle = ({
     [indexes, direction, selection],
   );
 
+  const handleIconProps = {
+    hasMergedCells,
+    direction,
+    isDragMenuOpen,
+    isRowHandleHovered,
+    isColumnHandleHovered,
+    isCurrentRowSelected,
+    isCurrentColumnSelected,
+    dragMenuDirection,
+  };
+
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
 
@@ -118,24 +133,6 @@ export const DragHandle = ({
     hasMergedCells,
   ]);
 
-  const handleIcon = useMemo(() => {
-    switch (true) {
-      // select but hover to other cells
-      case isRowHovered:
-      case isColumnHovered:
-      case isRowSelected || isColumnSelected: // when handle selected
-        return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
-      default:
-        return <MinimisedHandleIcon />;
-    }
-  }, [
-    isRowHovered,
-    isRowSelected,
-    isColumnHovered,
-    isColumnSelected,
-    hasMergedCells,
-  ]);
-
   return (
     <button
       className={classnames(
@@ -156,7 +153,7 @@ export const DragHandle = ({
       onMouseUp={onMouseUp}
       onClick={onClick}
     >
-      {handleIcon}
+      <HandleIconComponent {...handleIconProps} />
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&

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

@@ -57,7 +57,6 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
-  disabledCell,
   dragCornerControlButton,
   dragInsertButtonWrapper,
   floatingColumnControls,
@@ -337,7 +336,6 @@ export const tableStyles = (
     ${columnControlsLineMarker()};
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
-    ${disabledCell(props)};
     ${hoveredWarningCell};
     ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
@@ -1051,6 +1049,11 @@ export const tableStyles = (
           ${tableBorderStyles(props)};
           z-index: ${akEditorUnitZIndex * 100};
         }
+
+        &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+          ${tableBorderStyles(props)};
+          z-index: ${akEditorUnitZIndex * 100};
+        }
       }
     }
     ${tableRowControlStyles()}

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

@@ -98,11 +98,6 @@ export const tableCellDeleteColor = themed({
   dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
 });
 
-export const tableCellDisabledColor = token(
-  'color.background.accent.gray.subtler.hovered',
-  '#C1C7D0',
-);
-
 export const tableBorderDeleteColor = themed({
   light: token('color.border.danger', R400),
   dark: token('color.border.danger', R400),

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

@@ -32,7 +32,6 @@ import {
   tableBorderDeleteColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
-  tableCellDisabledColor,
   tableCellHoverDeleteIconBackground,
   tableCellHoverDeleteIconColor,
   tableCellSelectedDeleteIconBackground,
@@ -737,21 +736,23 @@ export const hoveredDeleteButton = (props: ThemeProps) => css`
     .${ClassName.SELECTED_CELL}::after {
       background: ${tableCellDeleteColor(props)};
     }
-  }
-`;
 
-export const disabledCell = (props: ThemeProps) => css`
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
-    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL} {
-      position: relative;
-      border: 1px solid ${tableCellDisabledColor};
-    }
-    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL}::after {
-      border: 1px solid ${tableCellDisabledColor};
+    .${ClassName.TABLE_NODE_WRAPPER} > table {
+      td.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
+        background: ${tableCellDeleteColor(props)};
+        border: 1px solid ${tableBorderDeleteColor(props)};
+      }
+      th.${ClassName.HOVERED_NO_HIGHLIGHT} {
+        background-color: unset;
+      }
+      th.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
+        background: ${tableCellDeleteColor(props)};
+        border: 1px solid ${tableBorderDeleteColor(props)};
+      }
     }
   }
 `;
+
 export const hoveredCell = (props: ThemeProps) => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
@@ -759,6 +760,10 @@ export const hoveredCell = (props: ThemeProps) => css`
       position: relative;
       border: 1px solid ${tableBorderSelectedColor(props)};
     }
+    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_NO_HIGHLIGHT} {
+      position: relative;
+      border: 1px solid ${tableBorderColor(props)};
+    }
   }
 `;
 

package/src/plugins/table/utils/decoration.ts

@@ -28,8 +28,6 @@ import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 
-import { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
-
 const filterDecorationByKey = (
   key: TableDecorations,
   decorationSet: DecorationSet,
@@ -99,13 +97,6 @@ export const createControlsHoverDecoration = (
 
   let updatedCells: number[] = cells.map((x) => x.pos);
 
-  const hasMergedCells =
-    type === 'row'
-      ? hasMergedCellsInRow(hoveredIndexes[0])(tr.selection)
-      : hasMergedCellsInColumn(hoveredIndexes[0])(tr.selection);
-
-  let disabled: boolean = hasMergedCells;
-
   // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
   // So If the table cells are in danger we want to create a "rectangle" selection
@@ -151,17 +142,21 @@ export const createControlsHoverDecoration = (
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
-    if (isDragAndDropEnable && disabled) {
-      classes.push(ClassName.HOVERED_DISABLED_CELL);
-    }
 
-    classes.push(
-      type === 'column'
-        ? ClassName.HOVERED_COLUMN
-        : type === 'row'
-        ? ClassName.HOVERED_ROW
-        : ClassName.HOVERED_TABLE,
-    );
+    if (isDragAndDropEnable) {
+      if (type === 'column' || type === 'row') {
+        classes.pop();
+        classes.push(ClassName.HOVERED_NO_HIGHLIGHT);
+      }
+    } else {
+      classes.push(
+        type === 'column'
+          ? ClassName.HOVERED_COLUMN
+          : type === 'row'
+          ? ClassName.HOVERED_ROW
+          : ClassName.HOVERED_TABLE,
+      );
+    }
 
     let key: TableDecorations;
     switch (type) {