@atlaskit/editor-plugin-table 5.3.9 → 5.3.11

package/dist/types/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     hoverRows: (rows: number[], danger?: boolean) => void;
     hoveredRows?: number[];
     selectRow: (row: number, expand: boolean) => void;
+    updateCellHoverLocation: (rowIndex: number) => void;
     hasHeaderRow?: boolean;
     isInDanger?: boolean;
     isResizing?: boolean;
@@ -18,7 +19,6 @@ export default class NumberColumn extends Component<Props, any> {
     private hoverRows;
     private selectRow;
     private clearHoverSelection;
-    private updateDragHandleLocation;
     private getCellStyles;
     private getClassNames;
 }

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
     tableActive?: boolean;
-    hoveredCell?: CellHoverCoordinates;
-    hoverRows?: (rows: number[], danger?: boolean) => void;
-    selectRow?: (row: number, expand: boolean) => void;
+    hoveredCell?: CellHoverMeta;
+    isInDanger?: boolean;
+    hoverRows: (rows: number[], danger?: boolean) => void;
+    selectRow: (row: number, expand: boolean) => void;
+    updateCellHoverLocation: (rowIndex: number) => void;
 };
 export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragControlsProps & WrappedComponentProps<"intl">>;

package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -3,7 +3,7 @@ import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     selection?: Selection;
@@ -18,7 +18,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
 }
@@ -36,5 +36,6 @@ export default class TableFloatingControls extends Component<Props, State> {
     render(): JSX.Element | null;
     private selectRow;
     private hoverRows;
+    private updateCellHoverLocation;
 }
 export {};

package/dist/types/plugins/table/ui/icons/DragHandleIcon.d.ts

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-interface DragHandleIconProps {
-    backgroundColor?: string;
-    foregroundColor?: string;
-}
-export declare const DragHandleIcon: ({ backgroundColor, foregroundColor, }: DragHandleIconProps) => JSX.Element;
-export {};
+export declare const DragHandleIcon: () => JSX.Element;

package/dist/types-ts4.5/plugins/table/commands/hover.d.ts

@@ -6,4 +6,4 @@ export declare const hoverTable: (isInDanger?: boolean, isSelected?: boolean) =>
 export declare const clearHoverSelection: () => import("@atlaskit/editor-common/types").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("@atlaskit/editor-common/types").Command;
 export declare const hideResizeHandleLine: () => import("@atlaskit/editor-common/types").Command;
-export declare const hoverCell: (rowIndex?: number, colIndex?: number) => import("@atlaskit/editor-common/types").Command;
+export declare const hoverCell: (rowIndex?: number, colIndex?: number, colWidth?: number, colHeight?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -44,15 +44,17 @@ export interface PluginConfig {
 }
 export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
-export type CellHoverCoordinates = {
+export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
-};
+    colWidth?: number;
+    colHeight?: number;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
     hoveredRows: number[];
-    hoveredCell: CellHoverCoordinates;
+    hoveredCell: CellHoverMeta;
     pluginConfig: PluginConfig;
     isHeaderColumnEnabled: boolean;
     isHeaderRowEnabled: boolean;
@@ -170,7 +172,9 @@ export type TablePluginAction = {
     };
 } | {
     type: 'HOVER_CELL';
-    data: CellHoverCoordinates;
+    data: {
+        hoveredCell: CellHoverMeta;
+    };
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -1,15 +1,15 @@
 import type { MouseEventHandler } from 'react';
-type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
+type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     previewWidth?: number;
     previewHeight?: number;
     direction?: 'column' | 'row';
-    state?: DragHandleState;
+    appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, state, indexes, previewWidth, previewHeight, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onClick, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -1,16 +1,17 @@
-import React from 'react';
+/// <reference types="react" />
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
-export interface Props {
+import type { CellHoverMeta } from '../../../types';
+export interface ColumnControlsProps {
     editorView: EditorView;
     tableActive?: boolean;
+    isInDanger?: boolean;
     tableRef: HTMLTableElement;
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     stickyTop?: number;
     localId?: string;
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
 }
-export declare const ColumnControls: React.FC<Props>;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -5,7 +5,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     getEditorFeatureFlags: GetEditorFeatureFlags;
@@ -13,10 +13,11 @@ export interface Props {
     tableRef?: HTMLTableElement;
     getNode: () => PmNode;
     tableActive?: boolean;
+    isInDanger?: boolean;
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     hoverRows: (rows: number[], danger?: boolean) => void;
     hoveredRows?: number[];
     selectRow: (row: number, expand: boolean) => void;
+    updateCellHoverLocation: (rowIndex: number) => void;
     hasHeaderRow?: boolean;
     isInDanger?: boolean;
     isResizing?: boolean;
@@ -18,7 +19,6 @@ export default class NumberColumn extends Component<Props, any> {
     private hoverRows;
     private selectRow;
     private clearHoverSelection;
-    private updateDragHandleLocation;
     private getCellStyles;
     private getClassNames;
 }

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
     tableActive?: boolean;
-    hoveredCell?: CellHoverCoordinates;
-    hoverRows?: (rows: number[], danger?: boolean) => void;
-    selectRow?: (row: number, expand: boolean) => void;
+    hoveredCell?: CellHoverMeta;
+    isInDanger?: boolean;
+    hoverRows: (rows: number[], danger?: boolean) => void;
+    selectRow: (row: number, expand: boolean) => void;
+    updateCellHoverLocation: (rowIndex: number) => void;
 };
 export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragControlsProps & WrappedComponentProps<"intl">>;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -3,7 +3,7 @@ import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     selection?: Selection;
@@ -18,7 +18,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
 }
@@ -36,5 +36,6 @@ export default class TableFloatingControls extends Component<Props, State> {
     render(): JSX.Element | null;
     private selectRow;
     private hoverRows;
+    private updateCellHoverLocation;
 }
 export {};

package/dist/types-ts4.5/plugins/table/ui/icons/DragHandleIcon.d.ts

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-interface DragHandleIconProps {
-    backgroundColor?: string;
-    foregroundColor?: string;
-}
-export declare const DragHandleIcon: ({ backgroundColor, foregroundColor, }: DragHandleIconProps) => JSX.Element;
-export {};
+export declare const DragHandleIcon: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.9",
+  "version": "5.3.11",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/event-handlers.ts

@@ -301,7 +301,10 @@ describe('withCellTracking', () => {
       withCellTracking(jest.fn())(editorView, event as any);
 
       const pluginState = getPluginState(editorView.state);
-      expect(pluginState.hoveredCell).toEqual({ colIndex: 0, rowIndex: 0 });
+      expect(pluginState.hoveredCell).toEqual({
+        colIndex: undefined,
+        rowIndex: undefined,
+      });
     });
   });
 });

package/src/__tests__/unit/ui/NumberColumn.tsx

@@ -27,9 +27,7 @@ import {
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
 import tablePlugin from '../../../plugins/table-plugin';
-import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-// import type { TablePluginState } from '../../../plugins/table/types';
 import { TableCssClassName as ClassName } from '../../../plugins/table/types';
 import NumberColumn from '../../../plugins/table/ui/TableFloatingControls/NumberColumn';
 
@@ -55,6 +53,7 @@ describe('NumberColumn', () => {
       doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
       { dragAndDropEnabled: true },
     );
+    const hoverCellLocationMock = jest.fn();
     const ref = editorView.dom.querySelector('table');
 
     const { container } = render(
@@ -65,6 +64,7 @@ describe('NumberColumn', () => {
           editorView={editorView}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
+          updateCellHoverLocation={hoverCellLocationMock}
           isDragAndDropEnabled
         />
       </IntlProvider>,
@@ -76,12 +76,7 @@ describe('NumberColumn', () => {
 
     fireEvent.mouseOver(firstNumberedCell!);
 
-    const pluginState = getPluginState(editorView.state);
-    // colIndex is not defined yet, keep undefined
-    expect(pluginState.hoveredCell).toEqual({
-      colIndex: undefined,
-      rowIndex: 0,
-    });
+    expect(hoverCellLocationMock).toHaveBeenCalledWith(0);
   });
 
   it('should render button disabled numbered column cells - when drag and drop is enabled', () => {
@@ -99,6 +94,7 @@ describe('NumberColumn', () => {
           editorView={editorView}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
+          updateCellHoverLocation={jest.fn()}
           isDragAndDropEnabled
         />
       </IntlProvider>,
@@ -130,6 +126,7 @@ describe('NumberColumn', () => {
           editorView={editorView}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
+          updateCellHoverLocation={jest.fn()}
           isDragAndDropEnabled={false}
         />
       </IntlProvider>,

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -70,6 +70,9 @@ describe('NumberColumn', () => {
           tableActive
           editorView={editorView}
           hoveredCell={{ rowIndex: 1, colIndex: 1 }}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          updateCellHoverLocation={jest.fn()}
         />
       </IntlProvider>,
     );
@@ -105,6 +108,9 @@ describe('NumberColumn', () => {
             colIndex: undefined,
             rowIndex: undefined,
           }}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          updateCellHoverLocation={jest.fn()}
         />
       </IntlProvider>,
     );

package/src/plugins/table/commands/hover.ts

@@ -191,13 +191,18 @@ export const hideResizeHandleLine = () =>
     },
   }));
 
-export const hoverCell = (rowIndex?: number, colIndex?: number) =>
+export const hoverCell = (
+  rowIndex?: number,
+  colIndex?: number,
+  colWidth?: number,
+  colHeight?: number,
+) =>
   createCommand(
     () => {
       return {
         type: 'HOVER_CELL',
         data: {
-          hoveredCell: { rowIndex, colIndex },
+          hoveredCell: { rowIndex, colIndex, colWidth, colHeight },
         },
       };
     },

package/src/plugins/table/event-handlers.ts

@@ -288,7 +288,7 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   if (isDragAndDropEnabled) {
-    hoverCell(undefined, undefined)(state, dispatch);
+    hoverCell()(state, dispatch);
   }
 
   if (
@@ -512,8 +512,9 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   const maybeTableCell = isElementInTableCell(
     target as HTMLElement,
   ) as HTMLTableCellElement | null;
+  const tableRef = getPluginState(view.state).tableRef;
 
-  if (!maybeTableCell) {
+  if (!maybeTableCell || !tableRef) {
     return;
   }
 
@@ -525,8 +526,21 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   const rowIndex = rowElement && rowElement.rowIndex;
   const { hoveredCell } = getPluginState(view.state);
 
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  const colHeight = tableRef.offsetHeight;
+  const colWidth = maybeTableCell.offsetWidth;
+
+  if (
+    hoveredCell.colIndex !== colIndex ||
+    hoveredCell.rowIndex !== rowIndex ||
+    hoveredCell.colWidth !== colWidth ||
+    hoveredCell.colHeight !== colHeight
+  ) {
+    hoverCell(
+      rowIndex,
+      colIndex,
+      colWidth,
+      colHeight,
+    )(view.state, view.dispatch);
   }
 };
 

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -435,12 +435,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       </div>
     );
 
-    const colControls = (
+    const colControls = isDragAndDropEnabled ? (
       <TableFloatingColumnControls
         editorView={view}
         tableRef={tableRef}
         getNode={getNode}
         tableActive={tableActive}
+        isInDanger={isInDanger}
         hoveredRows={hoveredRows}
         hoveredCell={hoveredCell}
         isResizing={isResizing}
@@ -452,7 +453,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
         getEditorFeatureFlags={this.props.getEditorFeatureFlags}
       />
-    );
+    ) : null;
 
     const shadowPadding =
       allowControls && tableActive ? -tableToolbarSize : tableMarginSides;

package/src/plugins/table/types.ts

@@ -85,14 +85,18 @@ export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
  *
  */
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
-
-export type CellHoverCoordinates = { colIndex?: number; rowIndex?: number };
+export interface CellHoverMeta {
+  colIndex?: number;
+  rowIndex?: number;
+  colWidth?: number;
+  colHeight?: number;
+}
 
 export interface TablePluginState {
   editorHasFocus?: boolean;
   hoveredColumns: number[];
   hoveredRows: number[];
-  hoveredCell: CellHoverCoordinates;
+  hoveredCell: CellHoverMeta;
   pluginConfig: PluginConfig;
   isHeaderColumnEnabled: boolean;
   isHeaderRowEnabled: boolean;
@@ -200,7 +204,12 @@ export type TablePluginAction =
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
   | { type: 'HIDE_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
-  | { type: 'HOVER_CELL'; data: CellHoverCoordinates }
+  | {
+      type: 'HOVER_CELL';
+      data: {
+        hoveredCell: CellHoverMeta;
+      };
+    }
   | { type: 'SET_TARGET_CELL_POSITION'; data: { targetCellPosition?: number } }
   | {
       type: 'SELECT_COLUMN';

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

@@ -1,18 +1,17 @@
 import type { MouseEventHandler } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 
+import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
-import { N200, N700 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
 
-type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
+type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
 type DragHandleProps = {
   tableLocalId: string;
@@ -20,39 +19,24 @@ type DragHandleProps = {
   previewWidth?: number;
   previewHeight?: number;
   direction?: 'column' | 'row';
-  state?: DragHandleState;
+  appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
 };
 
-const mapStateToProps = (state: DragHandleState) => {
-  switch (state) {
-    case 'danger':
-    case 'disabled':
-    case 'selected':
-    case 'default':
-    default:
-      return {
-        backgroundColor: token('color.background.accent.gray.subtlest', N200),
-        foregroundColor: token('color.icon.subtle', N700),
-      };
-  }
-};
-
 export const DragHandle = ({
   tableLocalId,
   direction = 'row',
-  state = 'default',
+  appearance = 'default',
   indexes,
   previewWidth,
   previewHeight,
-  onClick,
   onMouseOver,
   onMouseOut,
+  onClick,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
-  const iconProps = mapStateToProps(state);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
@@ -92,18 +76,18 @@ export const DragHandle = ({
 
   return (
     <button
-      className={ClassName.DRAG_HANDLE_BUTTON_CONTAINER}
+      className={classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance)}
       ref={dragHandleDivRef}
       style={{
-        backgroundColor: `${token('elevation.surface', 'white')}`,
-        borderRadius: '4px',
-        border: `2px solid ${token('elevation.surface', 'white')}`,
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
         pointerEvents: 'auto',
       }}
       data-testid="table-floating-column-controls-drag-handle"
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
+      onClick={onClick}
     >
-      <DragHandleIcon {...iconProps} />
+      <DragHandleIcon />
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&