@atlaskit/editor-plugin-table 7.7.2 → 7.7.4

package/dist/esm/ui/FloatingContextualMenu/styles.js

@@ -1,17 +1,26 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+  return css({
+    '&::before': {
+      background: selectedColor
+    }
+  });
 };
-export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+export var elementBeforeIconStyles = css({
+  marginRight: "var(--ds-space-negative-075, -6px)",
+  display: 'flex'
+});
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };

package/dist/esm/ui/FloatingDragMenu/styles.js

@@ -1,13 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+  return css({
+    '&::before': {
+      background: selectedColor
+    }
+  });
 };
-export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
-export var dragMenuBackgroundColorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
-export var toggleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+export var elementBeforeIconStyles = css({
+  marginRight: "var(--ds-space-negative-075, -6px)",
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var toggleStyles = css({
+  display: 'flex',
+  "input[type='checkbox']": {
+    width: '30px',
+    height: '14px',
+    pointerEvents: 'initial',
+    cursor: 'pointer'
+  },
+  '> label': {
+    margin: '0px',
+    pointerEvents: 'none',
+    '> span': {
+      pointerEvents: 'none'
+    }
+  }
+});

package/dist/esm/ui/icons/DisplayModeIcon.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+export var DisplayModeGlyth = function DisplayModeGlyth(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "5",
+    width: "4",
+    height: "14",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z",
+    fill: "currentColor"
+  }));
+};
+export var DisplayModeIcon = function DisplayModeIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: DisplayModeGlyth
+  }, props));
+};

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

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/dist/esm/ui/ui-styles.js

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';

package/dist/types/commands/display-mode.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const setTableDisplayMode: EditorCommand;

package/dist/types/commands/index.d.ts

@@ -6,3 +6,4 @@ export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOr
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/dist/types/commands/toggle.d.ts

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => TableLayout;
+export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "wide" | "full-width";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts

@@ -1,10 +1,10 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableOptions } from '../../../nodeviews/types';
-export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
+export declare function getLayoutSize(tableLayout: 'default' | 'wide' | 'full-width', containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
 export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
@@ -13,7 +13,7 @@ interface getTableMaxWidthProps {
     table: PMNode;
     tableStart: number;
     state: EditorState;
-    layout: TableLayout;
+    layout: 'default' | 'wide' | 'full-width';
     getEditorContainerWidth: GetEditorContainerWidth;
 }
 export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;

package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -23,7 +22,7 @@ export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeS
 export declare const evenSelectedColumnsWidths: (resizeState: ResizeState, rect: Rect) => ResizeState;
 export declare const bulkColumnsResize: (resizeState: ResizeState, columnsIndexes: number[], sourceColumnIndex: number) => ResizeState;
 export declare const areColumnsEven: (resizeState: ResizeState) => boolean;
-export declare const normaliseTableLayout: (input: string | undefined | null) => TableLayout;
+export declare const normaliseTableLayout: (input: string | undefined | null) => "default" | "wide" | "full-width";
 export declare const getNewResizeStateFromSelectedColumns: (rect: Rect, state: EditorState, domAtPos: (pos: number) => {
     node: Node;
     offset: number;

package/dist/types/toolbar.d.ts

@@ -3,10 +3,11 @@ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, Floating
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { TablePluginOptions } from './plugin';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/dist/types/ui/icons/DisplayModeIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
+export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/dist/types-ts4.5/commands/display-mode.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const setTableDisplayMode: EditorCommand;

package/dist/types-ts4.5/commands/index.d.ts

@@ -6,3 +6,4 @@ export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOr
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/dist/types-ts4.5/commands/toggle.d.ts

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => TableLayout;
+export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "wide" | "full-width";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -1,10 +1,10 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableOptions } from '../../../nodeviews/types';
-export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
+export declare function getLayoutSize(tableLayout: 'default' | 'wide' | 'full-width', containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
 export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
@@ -13,7 +13,7 @@ interface getTableMaxWidthProps {
     table: PMNode;
     tableStart: number;
     state: EditorState;
-    layout: TableLayout;
+    layout: 'default' | 'wide' | 'full-width';
     getEditorContainerWidth: GetEditorContainerWidth;
 }
 export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -23,7 +22,7 @@ export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeS
 export declare const evenSelectedColumnsWidths: (resizeState: ResizeState, rect: Rect) => ResizeState;
 export declare const bulkColumnsResize: (resizeState: ResizeState, columnsIndexes: number[], sourceColumnIndex: number) => ResizeState;
 export declare const areColumnsEven: (resizeState: ResizeState) => boolean;
-export declare const normaliseTableLayout: (input: string | undefined | null) => TableLayout;
+export declare const normaliseTableLayout: (input: string | undefined | null) => "default" | "wide" | "full-width";
 export declare const getNewResizeStateFromSelectedColumns: (rect: Rect, state: EditorState, domAtPos: (pos: number) => {
     node: Node;
     offset: number;

package/dist/types-ts4.5/toolbar.d.ts

@@ -3,10 +3,11 @@ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, Floating
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { TablePluginOptions } from './plugin';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/dist/types-ts4.5/ui/icons/DisplayModeIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
+export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.7.2",
+  "version": "7.7.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,8 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.9.0",
-    "@atlaskit/custom-steps": "^0.0.18",
+    "@atlaskit/adf-schema": "^35.9.2",
+    "@atlaskit/custom-steps": "^0.0.19",
     "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
@@ -136,6 +136,9 @@
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },
+    "platform.editor.table.preserve-widths-with-lock-button": {
+      "type": "boolean"
+    },
     "platform.editor.table.use-shared-state-hook": {
       "type": "boolean"
     },

package/src/commands/display-mode.ts

@@ -0,0 +1,19 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+export const setTableDisplayMode: EditorCommand = ({ tr }) => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return null;
+  }
+
+  const { displayMode } = table.node.attrs;
+
+  tr.setNodeMarkup(table.pos, tr.doc.type.schema.nodes.table, {
+    ...table.node.attrs,
+    displayMode:
+      !displayMode || displayMode === 'default' ? 'fixed' : 'default',
+  });
+
+  return tr.setMeta('scrollIntoView', false);
+};

package/src/commands/index.ts

@@ -44,3 +44,4 @@ export {
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/src/commands/toggle.ts

@@ -15,7 +15,7 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export const getNextLayout = (currentLayout: TableLayout): TableLayout => {
+export const getNextLayout = (currentLayout: TableLayout) => {
   switch (currentLayout) {
     case 'default':
       return 'wide';

package/src/commands-with-analytics.ts

@@ -1,6 +1,5 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import {
@@ -535,7 +534,9 @@ export const toggleTableLayoutWithAnalytics = (
     );
 
     if (table) {
-      const { layout } = table.node.attrs as { layout: TableLayout };
+      const { layout } = table.node.attrs as {
+        layout: 'default' | 'wide' | 'full-width';
+      };
       return {
         action: TABLE_ACTION.CHANGED_BREAKOUT_MODE,
         actionSubject: ACTION_SUBJECT.TABLE,

package/src/nodeviews/table.tsx

@@ -50,6 +50,7 @@ const tableAttributes = (node: PmNode) => {
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width,
+    'data-table-display-mode': node.attrs.displayMode,
   };
 };
 

package/src/plugin.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+  table,
+  tableCell,
+  tableHeader,
+  tableRow,
+  tableStage0,
+} from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -223,8 +229,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
+      const tableNode =
+        options?.isTableScalingEnabled &&
+        getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+          ? tableStage0
+          : table;
+
       return [
-        { name: 'table', node: table },
+        { name: 'table', node: tableNode },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },
@@ -610,6 +622,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
         () => editorViewRef.current,
+        options,
       )(pluginConfig(options?.tableOptions)),
     },
   };

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

@@ -197,8 +197,9 @@ export const handleMouseDown = (
         tr = updateColumnWidths(newResizeState, table, start)(tr);
 
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+          tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
         }
+
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
 

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -1,4 +1,4 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
   getTableContainerWidth,
@@ -34,7 +34,7 @@ import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
-  tableLayout: TableLayout,
+  tableLayout: 'default' | 'wide' | 'full-width',
   containerWidth: number = 0,
   options: TableOptions,
 ): number {
@@ -112,7 +112,7 @@ interface getTableMaxWidthProps {
   table: PMNode;
   tableStart: number;
   state: EditorState;
-  layout: TableLayout;
+  layout: 'default' | 'wide' | 'full-width';
   getEditorContainerWidth: GetEditorContainerWidth;
 }
 

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import {
   tableCellMinWidth,
@@ -321,9 +320,7 @@ export const areColumnsEven = (resizeState: ResizeState): boolean => {
 };
 
 // Get the layout
-export const normaliseTableLayout = (
-  input: string | undefined | null,
-): TableLayout => {
+export const normaliseTableLayout = (input: string | undefined | null) => {
   switch (input) {
     case 'wide':
       return input;