@atlaskit/editor-plugin-table 7.5.2 → 7.5.4

package/dist/esm/ui/LayoutButton/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createRef } from 'react';

package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';

package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';

package/dist/esm/ui/TableFloatingControls/index.js

@@ -9,7 +9,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';

package/dist/esm/utils/decoration.js

@@ -431,11 +431,9 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     if (isLastColumn) {
       return true; // If is the last column no filter applied
     }
-
     var nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
     return cellPosition !== nextPosition; // Removed it if next position is merged
   });
-
   var cells = cellPositions.map(function (pos) {
     return {
       pos: pos + table.start,
@@ -476,11 +474,9 @@ export var createColumnInsertLine = function createColumnInsertLine(columnIndex,
     if (isLastColumn) {
       return true; // If is the last column no filter applied
     }
-
     var nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
     return cellPosition !== nextPosition; // Removed it if next position is merged
   });
-
   var cells = cellPositions.map(function (pos) {
     return {
       pos: pos + table.start,

package/dist/esm/utils/guidelines.js

@@ -1,7 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import { calculateDefaultSnappings } from './snapping';
+import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } from './snapping';
 
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
-export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
+export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
+export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
+  return createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultTablePreserveSnappings(-1, editorContainerWidth))));
+};

package/dist/esm/utils/merged-cells.js

@@ -118,7 +118,6 @@ export var hasMergedCellsInBetween = function hasMergedCellsInBetween(indexes, t
         return !cells.includes(nodePos) // cell exists in Rect but not show in the map.cellsInRect list => merged cell
         ? true : mergedCells.has(nodePos); // cell includes in mergedCells => merged cell
       });
-
       return _toConsumableArray(new Set(mergedCell));
     };
     var mergedCellsInRectArr = indexes.map(function (index) {

package/dist/esm/utils/snapping.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -11,8 +11,21 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+
+// FF TablePreserve for calculateDefaultSnappings
+export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
+  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+};
 export var defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/types/commands-with-analytics.d.ts

@@ -11,6 +11,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
+export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
 export declare const insertColumnWithAnalytics: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;

package/dist/types/ui/ColumnResizeWidget/index.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;
     endIndex: number;
     includeTooltip?: boolean;
 };
-export declare const ColumnResizeWidget: React.FC<Props>;
+export declare const ColumnResizeWidget: ({ startIndex, endIndex, includeTooltip, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     index: number;
     localId?: string;
@@ -6,4 +6,4 @@ export interface Props {
     height?: number;
     marginTop?: number;
 }
-export declare const ColumnDropTarget: React.FC<Props>;
+export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => JSX.Element;

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     tableRef: HTMLTableElement;
     tableHeight?: number;
@@ -7,4 +7,4 @@ export interface Props {
     isHeaderSticky?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnDropTargets: React.FC<Props>;
+export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => JSX.Element | null;

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -26,5 +26,5 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const TableFloatingColumnControls: React.FC<Props>;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

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

@@ -10,7 +10,7 @@ export declare const canMove: (sourceType: DraggableType, direction: DraggableDa
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<IconProps>;
+    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, tablePreserveWidth?: boolean) => DragMenuConfig[];

package/dist/types/utils/guidelines.d.ts

@@ -1,2 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];

package/dist/types/utils/snapping.d.ts

@@ -1,6 +1,8 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
 export declare const defaultSnappingWidths: number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -11,6 +11,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
+export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
 export declare const insertColumnWithAnalytics: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;

package/dist/types-ts4.5/ui/ColumnResizeWidget/index.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;
     endIndex: number;
     includeTooltip?: boolean;
 };
-export declare const ColumnResizeWidget: React.FC<Props>;
+export declare const ColumnResizeWidget: ({ startIndex, endIndex, includeTooltip, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     index: number;
     localId?: string;
@@ -6,4 +6,4 @@ export interface Props {
     height?: number;
     marginTop?: number;
 }
-export declare const ColumnDropTarget: React.FC<Props>;
+export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     tableRef: HTMLTableElement;
     tableHeight?: number;
@@ -7,4 +7,4 @@ export interface Props {
     isHeaderSticky?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnDropTargets: React.FC<Props>;
+export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => JSX.Element | null;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -26,5 +26,5 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const TableFloatingColumnControls: React.FC<Props>;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

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

@@ -10,7 +10,7 @@ export declare const canMove: (sourceType: DraggableType, direction: DraggableDa
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<IconProps>;
+    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, tablePreserveWidth?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/utils/guidelines.d.ts

@@ -1,2 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];

package/dist/types-ts4.5/utils/snapping.d.ts

@@ -1,6 +1,8 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
 export declare const defaultSnappingWidths: number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/package.json

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

package/src/commands-with-analytics.ts

@@ -27,6 +27,7 @@ import {
 
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
+import { changeColumnWidthByStep } from './commands/column-resize';
 import { deleteColumnsCommand } from './commands/delete';
 import { insertColumn, insertRow } from './commands/insert';
 import {
@@ -251,6 +252,44 @@ export const insertRowWithAnalytics =
       insertRow(options.index, options.moveCursorToInsertedRow),
     );
 
+export const changeColumnWidthByStepWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    stepSize: number,
+    getEditorContainerWidth: GetEditorContainerWidth,
+    tablePreserveWidth: boolean,
+    inputMethod: INPUT_METHOD.SHORTCUT,
+  ) =>
+    withEditorAnalyticsAPI((state) => {
+      const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(
+        state.selection,
+      );
+      const {
+        hoveredCell: { colIndex },
+      } = getPluginState(state);
+
+      return {
+        action: TABLE_ACTION.COLUMN_RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          colIndex,
+          resizedDelta: stepSize,
+          isLastColumn: colIndex === totalColumnCount - 1,
+          tableWidth: table?.node.attrs.width,
+          inputMethod,
+          totalRowCount,
+          totalColumnCount,
+        },
+      };
+    })(editorAnalyticsAPI)(
+      changeColumnWidthByStep(
+        stepSize,
+        getEditorContainerWidth,
+        tablePreserveWidth,
+      ),
+    );
+
 export const insertColumnWithAnalytics =
   (
     getEditorContainerWidth: GetEditorContainerWidth,

package/src/nodeviews/TableContainer.tsx

@@ -12,6 +12,8 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorDefaultLayoutWidth,
+  akEditorGutterPadding,
+  akEditorMediaResizeHandlerPaddingWide,
   akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -189,7 +191,14 @@ export const ResizableTableContainer = React.memo(
 
     const tableWidth = getTableContainerWidth(node);
     // 76 is currently an accepted padding value considering the spacing for resizer handle
-    const responsiveContainerWidth = containerWidth - 76;
+    const responsiveContainerWidth = tablePreserveWidth
+      ? containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide / 2
+      : containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide;
+
     const width = Math.min(tableWidth, responsiveContainerWidth);
 
     if (!isResizing) {

package/src/nodeviews/TableResizer.tsx

@@ -51,8 +51,15 @@ import {
   generateResizeFrameRatePayloads,
   useMeasureFramerate,
 } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import {
+  defaultGuidelines,
+  defaultGuidelinesForPreserveTable,
+} from '../utils/guidelines';
+import {
+  defaultSnappingWidths,
+  defaultTablePreserveSnappingWidths,
+  findClosestSnap,
+} from '../utils/snapping';
 
 interface TableResizerProps {
   width: number;
@@ -211,9 +218,12 @@ export const TableResizer = ({
       if (gap !== currentGap.current) {
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
-          defaultGuidelines,
+          tablePreserveWidth
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           containerWidth,
         );
+
         displayGuideline(
           getGuidelinesWithHighlights(
             gap,
@@ -224,17 +234,19 @@ export const TableResizer = ({
         );
       }
     },
-    [displayGuideline, containerWidth],
+    [tablePreserveWidth, containerWidth, displayGuideline],
   );
 
   const guidelineSnaps = useMemo(
     () =>
       snappingEnabled
         ? {
-            x: defaultSnappingWidths,
+            x: tablePreserveWidth
+              ? defaultTablePreserveSnappingWidths(containerWidth)
+              : defaultSnappingWidths,
           }
         : undefined,
-    [snappingEnabled],
+    [snappingEnabled, tablePreserveWidth, containerWidth],
   );
 
   useEffect(() => {
@@ -270,9 +282,12 @@ export const TableResizer = ({
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
-      defaultGuidelines,
+      tablePreserveWidth
+        ? defaultGuidelinesForPreserveTable(containerWidth)
+        : defaultGuidelines,
       containerWidth,
     );
+
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (
       getBooleanFF('platform.editor.resizing-table-height-improvement') &&
@@ -281,12 +296,13 @@ export const TableResizer = ({
       onResizeStart();
     }
   }, [
+    startMeasure,
+    editorView,
     displayGapCursor,
+    tablePreserveWidth,
+    containerWidth,
     displayGuideline,
-    editorView,
-    startMeasure,
     onResizeStart,
-    containerWidth,
   ]);
 
   const handleResize = useCallback(
@@ -318,26 +334,30 @@ export const TableResizer = ({
       updateActiveGuidelines(
         findClosestSnap(
           newWidth,
-          defaultSnappingWidths,
-          defaultGuidelines,
+          tablePreserveWidth
+            ? defaultTablePreserveSnappingWidths(containerWidth)
+            : defaultSnappingWidths,
+          tablePreserveWidth
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           TABLE_HIGHLIGHT_GAP,
           TABLE_HIGHLIGHT_TOLERANCE,
         ),
       );
-
       updateWidth(newWidth);
 
       return newWidth;
     },
     [
-      editorView,
-      getPos,
-      node,
-      tableRef,
-      updateWidth,
-      updateActiveGuidelines,
       countFrames,
       tablePreserveWidth,
+      tableRef,
+      node,
+      editorView,
+      updateActiveGuidelines,
+      containerWidth,
+      updateWidth,
+      getPos,
     ],
   );
 

package/src/pm-plugins/keymap.ts

@@ -41,13 +41,13 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import {
   addRowAroundSelection,
+  changeColumnWidthByStepWithAnalytics,
   deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut,
   deleteTableIfSelectedWithAnalytics,
   emptyMultipleCellsWithAnalytics,
 } from '../commands-with-analytics';
 import {
   activateNextResizeArea,
-  changeColumnWidthByStep,
   initiateKeyboardColumnResizing,
   stopKeyboardColumnResizing,
 } from '../commands/column-resize';
@@ -198,13 +198,23 @@ export function keymapPlugin(
 
     bindKeymapWithCommand(
       decreaseMediaSize.common!,
-      changeColumnWidthByStep(-10, getEditorContainerWidth, tablePreserveWidth),
+      changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+        -10,
+        getEditorContainerWidth,
+        tablePreserveWidth,
+        INPUT_METHOD.SHORTCUT,
+      ),
       list,
     );
 
     bindKeymapWithCommand(
       increaseMediaSize.common!,
-      changeColumnWidthByStep(10, getEditorContainerWidth, tablePreserveWidth),
+      changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+        10,
+        getEditorContainerWidth,
+        tablePreserveWidth,
+        INPUT_METHOD.SHORTCUT,
+      ),
       list,
     );
     bindKeymapWithCommand(escape.common!, stopKeyboardColumnResizing(), list);

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

@@ -2,6 +2,7 @@ import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
+  INPUT_METHOD,
   TABLE_ACTION,
   TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
@@ -211,6 +212,9 @@ export const handleMouseDown = (
           resizingSelectedColumns ? selectedColumns : undefined,
           tablePreserveWidth,
         );
+
+        const resizedDelta = clientX - startX;
+
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -223,11 +227,26 @@ export const handleMouseDown = (
               type: 'table-border',
               position: 'right',
               duration: mouseUpTime - mouseDownTime,
-              delta: Math.abs(clientX - dragging.startX),
+              delta: Math.abs(resizedDelta),
             },
             eventType: EVENT_TYPE.UI,
           })(tr);
         }
+
+        editorAnalyticsAPI?.attachAnalyticsEvent({
+          action: TABLE_ACTION.COLUMN_RESIZED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            colIndex: colIndex,
+            resizedDelta,
+            isLastColumn: colIndex === map.width - 1,
+            tableWidth: table.attrs.width,
+            inputMethod: INPUT_METHOD.MOUSE,
+            totalRowCount: map.height,
+            totalColumnCount: map.width,
+          },
+        })(tr);
       }
       if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
         if (isKeyboardResize || !isTableHovered) {