@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -1,5 +1,20 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
+import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
+import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
+import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { deleteRows } from '../transforms';
+import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 var canDecrease = function canDecrease(index) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index > min;
@@ -8,38 +23,122 @@ var canIncrease = function canIncrease(index) {
   var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index < max;
 };
-export var getDragMenuConfig = function getDragMenuConfig(direction, tableMap, index) {
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) {
+  var addOptions = direction === 'row' ? [{
+    label: 'above',
+    offset: 0,
+    icon: AddRowAboveIcon,
+    keymap: addRowBefore
+  }, {
+    label: 'below',
+    offset: 1,
+    icon: AddRowBelowIcon,
+    keymap: addRowAfter
+  }] : [{
+    label: 'left',
+    offset: 0,
+    icon: AddColLeftIcon,
+    keymap: addColumnBefore
+  }, {
+    label: 'right',
+    offset: 1,
+    icon: AddColRightIcon,
+    keymap: addColumnAfter
+  }];
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowUpIcon
   }, {
     label: 'down',
     offset: 1,
     canMove: function canMove(index) {
       var _tableMap$height;
       return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    }
+    },
+    icon: ArrowDownIcon
   }] : [{
     label: 'left',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowLeftIcon
   }, {
     label: 'right',
     offset: 1,
     canMove: function canMove(index) {
       var _tableMap$width;
       return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    }
+    },
+    icon: ArrowRightIcon
   }];
-  return _toConsumableArray(moveOptions.map(function (_ref) {
+  var sortOptions = direction === 'column' ? [{
+    label: 'increasing',
+    order: SortOrder.ASC,
+    icon: HipchatChevronDoubleUpIcon
+  }, {
+    label: 'decreasing',
+    order: SortOrder.DESC,
+    icon: HipchatChevronDoubleDownIcon
+  }] : [];
+  return [].concat(_toConsumableArray(addOptions.map(function (_ref) {
     var label = _ref.label,
       offset = _ref.offset,
-      canMove = _ref.canMove;
+      icon = _ref.icon,
+      keymap = _ref.keymap;
+    return {
+      id: "add_".concat(direction, "_").concat(label),
+      title: "Add ".concat(direction, " ").concat(label),
+      icon: icon,
+      onClick: function onClick(state, dispatch) {
+        if (direction === 'row') {
+          insertRow(index + offset, true)(state, dispatch);
+        } else {
+          insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch);
+        }
+        return true;
+      },
+      keymap: keymap && tooltip(keymap)
+    };
+  })), [direction === 'column' ? {
+    id: 'distribute_columns',
+    title: 'Distribute columns',
+    disabled: true,
+    onClick: function onClick() {
+      return false;
+    },
+    icon: EditorLayoutThreeEqualIcon
+  } : undefined, {
+    id: 'clear_cells',
+    title: 'Clear cells',
+    onClick: function onClick(state, dispatch) {
+      clearMultipleCells(targetCellPosition)(state, dispatch);
+      return true;
+    },
+    icon: CrossCircleIcon,
+    keymap: tooltip(backspace)
+  }, {
+    id: "delete_".concat(direction),
+    title: "Delete ".concat(direction),
+    onClick: function onClick(state, dispatch) {
+      if (direction === 'row') {
+        dispatch === null || dispatch === void 0 || dispatch(deleteRows(selectionRect, false)(state.tr));
+      } else {
+        deleteColumnsCommand(selectionRect)(state, dispatch);
+      }
+      return true;
+    },
+    icon: RemoveIcon
+  }], _toConsumableArray(moveOptions.map(function (_ref2) {
+    var label = _ref2.label,
+      offset = _ref2.offset,
+      canMove = _ref2.canMove,
+      icon = _ref2.icon;
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
       disabled: !canMove(index),
+      icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
           moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
@@ -48,5 +147,18 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, tableMap, i
         return false;
       }
     };
-  }));
+  })), _toConsumableArray(sortOptions.map(function (_ref3) {
+    var label = _ref3.label,
+      order = _ref3.order,
+      icon = _ref3.icon;
+    return {
+      id: "sort_column_".concat(order),
+      title: "Sort ".concat(label),
+      icon: icon,
+      onClick: function onClick(state, dispatch) {
+        sortByColumn(index, order)(state, dispatch);
+        return true;
+      }
+    };
+  }))).filter(Boolean);
 };

package/dist/esm/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/types/plugins/table/types.d.ts

@@ -269,6 +269,9 @@ export declare const TableCssClassName: {
     CONTROLS_INSERT_LINE: string;
     CONTROLS_BUTTON_OVERLAY: string;
     LAYOUT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
     CONTROLS_INSERT_ROW: string;
@@ -281,8 +284,12 @@ export declare const TableCssClassName: {
     CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
     CONTROLS_CORNER_BUTTON: string;
     /** Controls with drag handle */
-    COLUMN_CONTROLS_WITH_DRAG: string;
-    ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_ROW_CONTROLS: string;
+    DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_ROW_FLOATING_INSERT_DOT: string;
+    DRAG_COLUMN_CONTROLS: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;

package/dist/types/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -14,6 +16,7 @@ type DragMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
+    getEditorContainerWidth: GetEditorContainerWidth;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
@@ -13,9 +14,10 @@ export interface Props {
     direction?: TableDirection;
     index?: number;
     targetCellPosition?: number;
+    getEditorContainerWidth: GetEditorContainerWidth;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts

@@ -3,11 +3,15 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    direction: TableDirection;
+    type: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
 }
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
+};
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
 };

package/dist/types/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts

@@ -1,4 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import type { TableDirection } from '../../types';
-declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, isDragAndDropEnabled: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

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

@@ -13,6 +13,7 @@ export interface Props {
     insertRowButtonIndex?: number;
     isHeaderColumnEnabled?: boolean;
     isHeaderRowEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;

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

@@ -12,6 +12,7 @@ export interface ColumnControlsProps {
     localId?: string;
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
+    hasHeaderColumn?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

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

@@ -10,6 +10,8 @@ type DragControlsProps = {
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
+    isResizing?: boolean;
+    hasHeaderRow?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddColLeftIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddColRightIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddRowAboveIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddRowBelowIcon: () => JSX.Element;

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

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

package/dist/types/plugins/table/ui/ui-styles.d.ts

@@ -3,6 +3,7 @@ export declare const InsertMarker: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

package/dist/types/plugins/table/utils/dom.d.ts

@@ -5,10 +5,13 @@ export declare const isInsertRowButton: (node: HTMLElement | null) => boolean |
 export declare const getColumnOrRowIndex: (target: HTMLElement) => [number, number];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
+/** drag-and-drop classes */
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
+export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;

package/dist/types/plugins/table/utils/drag-menu.d.ts

@@ -1,7 +1,10 @@
-import type { Command, DropdownOptionT } from '@atlaskit/editor-common/types';
-import type { TableMap } from '@atlaskit/editor-tables/table-map';
+/// <reference types="react" />
+import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: string;
+    icon?: React.ComponentType<IconProps>;
+    keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, tableMap?: TableMap, index?: number) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/dist/types/plugins/table/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

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

@@ -269,6 +269,9 @@ export declare const TableCssClassName: {
     CONTROLS_INSERT_LINE: string;
     CONTROLS_BUTTON_OVERLAY: string;
     LAYOUT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
     CONTROLS_INSERT_ROW: string;
@@ -281,8 +284,12 @@ export declare const TableCssClassName: {
     CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
     CONTROLS_CORNER_BUTTON: string;
     /** Controls with drag handle */
-    COLUMN_CONTROLS_WITH_DRAG: string;
-    ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_ROW_CONTROLS: string;
+    DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_ROW_FLOATING_INSERT_DOT: string;
+    DRAG_COLUMN_CONTROLS: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;

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

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -14,6 +16,7 @@ type DragMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
+    getEditorContainerWidth: GetEditorContainerWidth;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
@@ -13,9 +14,10 @@ export interface Props {
     direction?: TableDirection;
     index?: number;
     targetCellPosition?: number;
+    getEditorContainerWidth: GetEditorContainerWidth;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

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

@@ -3,11 +3,15 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    direction: TableDirection;
+    type: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
 }
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
+};
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
 };

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

@@ -1,4 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import type { TableDirection } from '../../types';
-declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, isDragAndDropEnabled: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

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

@@ -13,6 +13,7 @@ export interface Props {
     insertRowButtonIndex?: number;
     isHeaderColumnEnabled?: boolean;
     isHeaderRowEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;

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

@@ -12,6 +12,7 @@ export interface ColumnControlsProps {
     localId?: string;
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
+    hasHeaderColumn?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

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

@@ -10,6 +10,8 @@ type DragControlsProps = {
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
+    isResizing?: boolean;
+    hasHeaderRow?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddColLeftIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddColRightIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddRowAboveIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AddRowBelowIcon: () => JSX.Element;

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

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

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

@@ -3,6 +3,7 @@ export declare const InsertMarker: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

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

@@ -8,10 +8,13 @@ export declare const getColumnOrRowIndex: (target: HTMLElement) => [
 ];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
+/** drag-and-drop classes */
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
+export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;

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

@@ -1,7 +1,10 @@
-import type { Command, DropdownOptionT } from '@atlaskit/editor-common/types';
-import type { TableMap } from '@atlaskit/editor-tables/table-map';
+/// <reference types="react" />
+import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: string;
+    icon?: React.ComponentType<IconProps>;
+    keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, tableMap?: TableMap, index?: number) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

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

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.13",
+  "version": "5.3.15",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,6 +40,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
+    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.4",
     "@atlaskit/primitives": "^1.7.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",