@atlaskit/editor-plugin-table 5.4.0 → 5.4.2

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]);
@@ -167,6 +171,7 @@ const DragControlsComponent = ({
           : `${dropTargetExtendedWidth}px 24px`,
       }}
       onMouseMove={handleMouseMove}
+      contentEditable={false}
     >
       {!isResizing &&
         rowsParams.map(({ startIndex, endIndex }, index) => (
@@ -225,7 +230,7 @@ const DragControlsComponent = ({
         >
           <DragHandle
             tableLocalId={currentNodeLocalId}
-            indexes={[rowIndex!]}
+            indexes={rowIndexes}
             previewWidth={tableWidth}
             previewHeight={rowHeights[rowIndex!]}
             appearance={

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

@@ -736,7 +736,7 @@ export const tableStyles = (
       display: grid;
       align-items: center;
       position: absolute;
-      left: -${dropTargetExtendedWidth + 4}px;
+      left: -${dropTargetExtendedWidth}px;
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
@@ -749,7 +749,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 +800,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';

package/src/__tests__/integration/horizontal-scroll.ts

@@ -1,491 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  fullpage,
-  resizeColumn,
-} from '@atlaskit/editor-test-helpers/integration/helpers';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  insertColumn,
-  insertTable,
-} from '@atlaskit/editor-test-helpers/page-objects/table';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  goToEditorTestingWDExample,
-  mountEditor,
-} from '@atlaskit/editor-test-helpers/testing-example-page';
-import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-import type WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
-
-import basicTableAdf from './__fixtures__/basic-table';
-import { emptyLayout } from './__fixtures__/empty-layout';
-import nestedInExpand from './__fixtures__/nested-in-expand';
-import { nestedInExtension } from './__fixtures__/nested-in-extension';
-import { table as tableInsideLayout } from './__fixtures__/table-inside-layout';
-
-// TODO - Add wider screen size here once editor-common fix is made ED-16647
-const screenWidths = [1920];
-
-const breakout = async (
-  page: WebdriverPage,
-  breakoutButton: WebdriverIO.Element,
-) => {
-  let tableContainer = await page.$('.pm-table-container');
-
-  const currentWidth = await tableContainer.getCSSProperty('width');
-  breakoutButton.click();
-
-  await page.waitUntil(async () => {
-    tableContainer = await page.$('.pm-table-container');
-    const updatedWidth = await tableContainer.getCSSProperty('width');
-    return updatedWidth.value !== currentWidth.value;
-  });
-};
-
-const assertTableDoesNotScroll = async (page: WebdriverPage) => {
-  const table = await page.$('.pm-table-wrapper');
-
-  const tableScrollWidth = await table.getProperty('scrollWidth');
-  const tableOffsetWidth = await table.getProperty('offsetWidth');
-
-  expect(tableScrollWidth).toEqual(tableOffsetWidth);
-};
-
-const assertTableDoesScroll = async (page: WebdriverPage) => {
-  const table = await page.$('.pm-table-wrapper');
-
-  const tableScrollWidth = await table.getProperty('scrollWidth');
-  const tableOffsetWidth = (await table.getProperty('offsetWidth')) as number;
-
-  expect(tableScrollWidth).toBeGreaterThan(tableOffsetWidth);
-};
-
-BrowserTestCase(
-  'Table: Does not scroll when column is resized and a new column is inserted',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: basicTableAdf,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowLayouts: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
-      await insertColumn(page, 0, 'right');
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when column is resized and breakout button is clicked 3x',
-  { skip: ['safari'] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: basicTableAdf,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
-      await insertColumn(page, 0, 'right');
-
-      const breakoutButton = await page.$('[aria-label="Go wide"]');
-
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when nested in expand, column is resized and breakout button is clicked',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: nestedInExpand,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      const breakoutButton = await page.$('[aria-label="Go wide"]');
-
-      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Last column can be resized to remove scroll',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: basicTableAdf,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
-      await assertTableDoesScroll(page);
-      await resizeColumn(page, { cellHandlePos: 10, resizeWidth: -1000 });
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: When nested in expand, last column can be resized to remove scroll',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: nestedInExpand,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
-      await assertTableDoesScroll(page);
-      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: When nested in layout, last column can be resized to remove scroll',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: tableInsideLayout,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: 1000 });
-      await assertTableDoesScroll(page);
-      await resizeColumn(page, { cellHandlePos: 16, resizeWidth: -1000 });
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: When nested in bodied macro, last column can be resized to remove scroll',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: nestedInExtension,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-        allowExtension: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
-      await assertTableDoesScroll(page);
-      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Scrolls when there are more columns added than can fit the current width',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: basicTableAdf,
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowExpand: true,
-        allowLayouts: true,
-        allowBreakout: true,
-      });
-
-      const numberOfColumns = 14;
-      for (const _column of [...Array(numberOfColumns).keys()]) {
-        await insertColumn(page, 0, 'right');
-      }
-
-      await assertTableDoesScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when nested in Bodied Macro, column is resized and breakout button is clicked',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: JSON.stringify(nestedInExtension),
-        allowTables: {
-          advanced: true,
-        },
-        allowExtension: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
-      await insertColumn(page, 0, 'right');
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when nested in layout, column is resized and breakout button is clicked',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: JSON.stringify(tableInsideLayout),
-        allowTables: {
-          advanced: true,
-        },
-        allowLayouts: {
-          allowBreakout: true,
-        },
-        allowBreakout: true,
-      });
-
-      const breakoutButton = await page.$('[aria-label="Go wide"]');
-
-      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when nested in single column layout, table column is resized and breakout button is clicked',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: JSON.stringify(tableInsideLayout),
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowLayouts: {
-          allowBreakout: true,
-          UNSAFE_allowSingleColumnLayout: true,
-        },
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
-
-      const singleColumnButton = await page.$('[aria-label="Single column"]');
-      singleColumnButton.click();
-
-      const breakoutButton = await page.$('[aria-label="Go wide"]');
-
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-BrowserTestCase(
-  'Table: Does not scroll when nested in three columns layout, table column is resized and breakout button is clicked',
-  { skip: [] },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: JSON.stringify(tableInsideLayout),
-        allowTables: {
-          advanced: true,
-          allowDistributeColumns: true,
-        },
-        allowLayouts: {
-          allowBreakout: true,
-          UNSAFE_allowSingleColumnLayout: true,
-        },
-        allowBreakout: true,
-      });
-
-      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
-
-      const threeColumnButton = await page.$('[aria-label="Three columns"]');
-      threeColumnButton.click();
-
-      const breakoutButton = await page.$('[aria-label="Go wide"]');
-
-      await breakout(page, breakoutButton);
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);
-
-// FIXME: This test was automatically skipped due to failure on 28/07/2023: https://product-fabric.atlassian.net/browse/ED-19288
-BrowserTestCase(
-  'Table: Does not scroll when nested in full-width layout, columns is resized and new column is inserted',
-  {
-    skip: ['*'],
-  },
-  async (client: any, testName: string) => {
-    for (const screenWidth of screenWidths) {
-      const page = await goToEditorTestingWDExample(
-        client,
-        'editor-plugin-table',
-        { width: screenWidth, height: 1440 },
-      );
-
-      await mountEditor(page, {
-        appearance: fullpage.appearance,
-        defaultValue: emptyLayout,
-        allowTables: {
-          advanced: true,
-        },
-        allowLayouts: {
-          allowBreakout: true,
-        },
-        allowBreakout: true,
-      });
-
-      const goWideButton = await page.$('[aria-label="Go wide"]');
-      goWideButton.click();
-      goWideButton.click();
-
-      insertTable(page);
-      await assertTableDoesNotScroll(page);
-      await resizeColumn(page, { cellHandlePos: 4, resizeWidth: -100 });
-      await insertColumn(page, 0, 'right');
-      await assertTableDoesNotScroll(page);
-    }
-  },
-);