@atlaskit/editor-plugin-table 5.3.26 → 5.3.27

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

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  disabledCell,
   dragCornerControlButton,
   dragInsertButtonWrapper,
   floatingColumnControls,
@@ -315,6 +316,7 @@ export const tableStyles = (
     ${columnControlsLineMarker()};
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
+    ${disabledCell(props)};
     ${hoveredWarningCell};
     ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
@@ -779,58 +781,49 @@ export const tableStyles = (
       align-items: center;
       outline: none !important;
 
-      svg {
-        rect {
-          fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-        }
-        g {
-          fill: ${token('color.icon.subtle', '#626F86')};
-        }
-      }
-
-      &:hover {
-        svg {
+      &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+        & > svg {
           rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
           }
           g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+            fill: ${token('color.icon.subtle', '#626F86')};
           }
         }
-      }
 
-      &.selected {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
-          }
-          g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+        &:hover {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#FFF')};
+            }
           }
         }
-      }
 
-      &.danger {
-        svg {
-          rect {
-            fill: ${token(
-              'color.background.accent.red.subtler.pressed',
-              '#F87462',
-            )};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.selected {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579dff')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#fff')};
+            }
           }
         }
-      }
 
-      &.disabled {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.danger {
+          svg {
+            rect {
+              fill: ${token(
+                'color.background.accent.red.subtler.pressed',
+                '#F87462',
+              )};
+            }
+            g {
+              fill: ${token('color.border.inverse', '#FFF')};
+            }
           }
         }
       }

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

@@ -97,6 +97,12 @@ export const tableCellDeleteColor = themed({
   light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
   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/icons/DragHandleDisabledIcon.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+interface DragHandleDisabledIconProps {
+  style?: React.CSSProperties;
+}
+
+export const DragHandleDisabledIcon = ({
+  style,
+}: DragHandleDisabledIconProps) => (
+  <svg
+    width="24"
+    height="16"
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <rect
+      width="24"
+      height="16"
+      rx="4"
+      fill={token('color.background.accent.gray.subtlest', 'Neutral200')}
+    />
+    <g>
+      <rect
+        x="7"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+      <rect
+        x="11"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+      <rect
+        x="15"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+    </g>
+  </svg>
+);

package/src/plugins/table/ui/icons/index.ts

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -31,6 +31,7 @@ import {
   tableBorderDeleteColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
+  tableCellDisabledColor,
   tableCellHoverDeleteIconBackground,
   tableCellHoverDeleteIconColor,
   tableCellSelectedDeleteIconBackground,
@@ -707,6 +708,18 @@ export const hoveredDeleteButton = (props: ThemeProps) => css`
   }
 `;
 
+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};
+    }
+  }
+`;
 export const hoveredCell = (props: ThemeProps) => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {

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

@@ -28,6 +28,8 @@ 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,
@@ -66,6 +68,8 @@ export const createControlsHoverDecoration = (
   cells: Cell[],
   type: 'row' | 'column' | 'table',
   tr: Transaction | ReadonlyTransaction,
+  isDragAndDropEnable: boolean | undefined,
+  hoveredIndexes: number[],
   danger?: boolean,
   selected?: boolean,
 ): Decoration[] => {
@@ -95,6 +99,13 @@ 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
@@ -140,6 +151,9 @@ export const createControlsHoverDecoration = (
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
+    if (isDragAndDropEnable && disabled) {
+      classes.push(ClassName.HOVERED_DISABLED_CELL);
+    }
 
     classes.push(
       type === 'column'

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

@@ -1,6 +1,10 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type {
+  Selection,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
   getSelectionRangeInColumn,