@atlaskit/editor-plugin-table 5.4.1 → 5.4.3

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -8,6 +8,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 
 import {
   clearHoverSelection,
+  hoverCell,
   hoverColumns,
   selectColumn,
 } from '../../../commands';
@@ -92,6 +93,29 @@ export const ColumnControls = ({
     hoverColumns([colIndex!])(state, dispatch);
   }, [colIndex, editorView]);
 
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const isParentDragControls = (e.nativeEvent.target as Element).closest(
+        `.${ClassName.DRAG_COLUMN_CONTROLS}`,
+      );
+      const colIndex = (e.nativeEvent.target as Element).getAttribute(
+        'data-start-index',
+      );
+
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !colIndex) {
+        return;
+      }
+
+      // update hovered cell location
+      const { state, dispatch } = editorView;
+      if (tableActive && hoveredCell?.colIndex !== Number(colIndex)) {
+        hoverCell(hoveredCell?.rowIndex, Number(colIndex))(state, dispatch);
+      }
+    },
+    [editorView, hoveredCell?.colIndex, hoveredCell?.rowIndex, tableActive],
+  );
+
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const { state, dispatch } = editorView;
@@ -104,8 +128,15 @@ export const ColumnControls = ({
     toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
   }, [editorView, colIndex]);
 
+  const colIndexes = useMemo(() => {
+    return [colIndex!];
+  }, [colIndex]);
+
   return (
-    <div className={ClassName.DRAG_COLUMN_CONTROLS}>
+    <div
+      className={ClassName.DRAG_COLUMN_CONTROLS}
+      onMouseMove={handleMouseMove}
+    >
       <div
         className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
@@ -160,7 +191,7 @@ export const ColumnControls = ({
               <DragHandle
                 direction="column"
                 tableLocalId={localId || ''}
-                indexes={[hoveredCell.colIndex!]}
+                indexes={colIndexes}
                 previewWidth={hoveredCell.colWidth}
                 previewHeight={hoveredCell.colHeight}
                 appearance={

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -146,6 +146,10 @@ const DragControlsComponent = ({
     [updateCellHoverLocation],
   );
 
+  const rowIndexes = useMemo(() => {
+    return [rowIndex!];
+  }, [rowIndex]);
+
   const handleMouseOver = useCallback(() => {
     hoverRows([rowIndex!]);
   }, [hoverRows, rowIndex]);
@@ -163,10 +167,12 @@ const DragControlsComponent = ({
       style={{
         gridTemplateRows: heights,
         gridTemplateColumns: isDragging
-          ? `${dropTargetExtendedWidth}px 24px ${tableWidth}px`
-          : `${dropTargetExtendedWidth}px 24px`,
+          ? `${dropTargetExtendedWidth}px 28px ${tableWidth}px`
+          : 'none',
+        left: isDragging ? `-${dropTargetExtendedWidth + 2}px` : `-2px`,
       }}
       onMouseMove={handleMouseMove}
+      contentEditable={false}
     >
       {!isResizing &&
         rowsParams.map(({ startIndex, endIndex }, index) => (
@@ -225,7 +231,7 @@ const DragControlsComponent = ({
         >
           <DragHandle
             tableLocalId={currentNodeLocalId}
-            indexes={[rowIndex!]}
+            indexes={rowIndexes}
             previewWidth={tableWidth}
             previewHeight={rowHeights[rowIndex!]}
             appearance={

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

@@ -30,7 +30,6 @@ import { TableCssClassName as ClassName } from '../types';
 
 import {
   columnControlsDecorationHeight,
-  dropTargetExtendedWidth,
   resizeHandlerAreaWidth,
   resizeLineWidth,
   rowControlsZIndex,
@@ -736,7 +735,6 @@ export const tableStyles = (
       display: grid;
       align-items: center;
       position: absolute;
-      left: -${dropTargetExtendedWidth + 4}px;
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
@@ -749,7 +747,7 @@ export const tableStyles = (
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
         position: absolute;
         bottom: -3px;
-        left: 6px;
+        left: 2px;
         background-color: ${token(
           'color.background.accent.gray.subtler',
           '#C1C7D0',
@@ -800,13 +798,27 @@ export const tableStyles = (
       align-items: center;
       outline: none !important;
 
+      &.${ClassName.DRAG_HANDLE_DISABLED} {
+        & > svg {
+          & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
+            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+          }
+          & > rect {
+            fill: ${token('color.background.accent.gray.subtlest', '#F4F5F7')};
+          }
+          & > g > rect {
+            fill: ${token('color.icon.disabled', '#BFDBF847')};
+          }
+        }
+      }
+
       &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
         & > svg {
           rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
+            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
           }
           g {
-            fill: ${token('color.icon.subtle', '#626F86')};
+            fill: ${token('color.icon.subtle', '#626f86')};
           }
         }
 

package/src/plugins/table/ui/icons/DragHandleDisabledIcon.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { token } from '@atlaskit/tokens';
-
 interface DragHandleDisabledIconProps {
   style?: React.CSSProperties;
 }
@@ -17,37 +15,11 @@ export const DragHandleDisabledIcon = ({
     xmlns="http://www.w3.org/2000/svg"
     style={style}
   >
-    <rect
-      width="24"
-      height="16"
-      rx="4"
-      fill={token('color.background.accent.gray.subtlest', 'Neutral200')}
-    />
+    <rect width="24" height="16" rx="4" />
     <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')}
-      />
+      <rect x="7" y="4" width="2" height="8" rx="1" />
+      <rect x="11" y="4" width="2" height="8" rx="1" />
+      <rect x="15" y="4" width="2" height="8" rx="1" />
     </g>
   </svg>
 );

package/src/plugins/table/ui/icons/MinimisedHandle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { TableCssClassName as ClassName } from '../../types';
+
+export const MinimisedHandleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="5" fill="none">
+    <rect
+      className={ClassName.DRAG_HANDLE_MINIMISED}
+      width="24"
+      height="5"
+      rx="3"
+    />
+  </svg>
+);

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

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