@atlaskit/editor-common 74.6.0 → 74.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 74.7.0
+
+### Minor Changes
+
+- [`89989e06f43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89989e06f43) - [ux] Adding initial Resizer to table plugin behind a platform feature flag, allowing tables to resize to a custom width. This change also includes the following refactors:- change calcTableWidth function to return number instead of px- allowing tables to use breakout values when allowColumnResize is disabled
+
 ## 74.6.0
 
 ### Minor Changes

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/node-width/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getParentNodeWidth = void 0;
+exports.layoutToWidth = exports.getTableContainerWidth = exports.getParentNodeWidth = void 0;
 var _prosemirrorUtils = require("prosemirror-utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("@atlaskit/theme/constants");
@@ -12,10 +12,17 @@ var _layout = require("../styles/shared/layout");
 var _breakout = require("../utils/breakout");
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
+var layoutToWidth = {
+  default: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  wide: _editorSharedStyles.akEditorWideLayoutWidth,
+  'full-width': _editorSharedStyles.akEditorFullWidthLayoutWidth
+};
+
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
  * If current node selection is not nested will return undefined
  */
+exports.layoutToWidth = layoutToWidth;
 var getParentNodeWidth = function getParentNodeWidth(pos, state, containerWidth, isFullWidthModeEnabled) {
   if (!pos) {
     return;
@@ -83,4 +90,11 @@ var getNestedParentNode = function getNestedParentNode(tablePos, state) {
 };
 var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, _editorSharedStyles.akEditorFullWidthLayoutWidth) : (0, _breakout.absoluteBreakoutWidth)(layout, containerWidth.width);
-};
+};
+var getTableContainerWidth = function getTableContainerWidth(node) {
+  if (node.attrs.width) {
+    return node.attrs.width;
+  }
+  return layoutToWidth[node.attrs.layout];
+};
+exports.getTableContainerWidth = getTableContainerWidth;

package/dist/cjs/resizer/Resizer.js

@@ -19,7 +19,9 @@ function ResizerNext(props) {
     _props$handlerHeightS = props.handlerHeightSize,
     handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS,
     _props$handleAlignmen = props.handleAlignmentMethod,
-    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen;
+    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
+    _props$resizeRatio = props.resizeRatio,
+    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio;
   var onResizeStart = _react.default.useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
@@ -90,6 +92,7 @@ function ResizerNext(props) {
     ,
     onResizeStart: onResizeStart,
     onResize: onResize,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    resizeRatio: resizeRatio
   }, props.children);
 }

package/dist/cjs/styles/shared/resizer.js

@@ -41,5 +41,5 @@ var resizerHandlerClassName = {
   large: resizerHandlerLargeClassName
 };
 exports.resizerHandlerClassName = resizerHandlerClassName;
-var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);
+var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", " {\n    visibility: visible;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);
 exports.resizerStyles = resizerStyles;

package/dist/cjs/styles/shared/table.js

@@ -49,7 +49,8 @@ var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: _adfSchema.tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: _adfSchema.tableHeaderSelector,
   TABLE_ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-wrapper"),
-  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration")
+  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
+  TABLE_RESIZER_CONTAINER: "".concat(_adfSchema.tablePrefixSelector, "-resizer-container")
 };
 exports.TableSharedCssClassName = TableSharedCssClassName;
 var tableSharedStyle = function tableSharedStyle(props) {
@@ -98,12 +99,12 @@ var calcTableWidth = function calcTableWidth(layout, containerWidth) {
   var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   switch (layout) {
     case 'full-width':
-      return containerWidth ? "".concat(Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorFullWidthLayoutWidth), "px") : "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px");
+      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
     case 'wide':
       if (containerWidth) {
-        return "".concat(Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorWideLayoutWidth), "px");
+        return Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorWideLayoutWidth);
       }
-      return "".concat(_editorSharedStyles.akEditorWideLayoutWidth, "px");
+      return _editorSharedStyles.akEditorWideLayoutWidth;
     default:
       return 'inherit';
   }

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.6.0",
+	"version": "74.7.0",
 	"sideEffects": false
 }

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/node-width/index.js

@@ -1,10 +1,15 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
+export const layoutToWidth = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+};
 
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
@@ -78,4 +83,10 @@ const getNestedParentNode = (tablePos, state) => {
 };
 const calcBreakoutNodeWidth = (layout, containerWidth, isFullWidthModeEnabled) => {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
+};
+export const getTableContainerWidth = node => {
+  if (node.attrs.width) {
+    return node.attrs.width;
+  }
+  return layoutToWidth[node.attrs.layout];
 };

package/dist/es2019/resizer/Resizer.js

@@ -9,7 +9,8 @@ export default function ResizerNext(props) {
     handleResizeStart,
     handleResizeStop,
     handlerHeightSize = 'medium',
-    handleAlignmentMethod = 'center'
+    handleAlignmentMethod = 'center',
+    resizeRatio = 1
   } = props;
   const onResizeStart = React.useCallback(event => {
     // prevent creating a drag event on Firefox
@@ -91,6 +92,7 @@ export default function ResizerNext(props) {
     ,
     onResizeStart: onResizeStart,
     onResize: onResize,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    resizeRatio: resizeRatio
   }, props.children);
 }

package/dist/es2019/styles/shared/resizer.js

@@ -23,12 +23,9 @@ export const resizerHandlerClassName = {
   large: resizerHandlerLargeClassName
 };
 export const resizerStyles = css`
-  .${resizerItemClassName} {
-    background: ${`var(--ds-border-focused, ${B200})`};
-  }
-
   .${resizerHandleRightClassName}, .${resizerHandleLeftClassName} {
     display: flex;
+    visibility: hidden;
     flex-direction: column;
     justify-content: center;
   }
@@ -51,6 +48,13 @@ export const resizerStyles = css`
     border-radius: 6px;
   }
 
+  .${resizerItemClassName}:hover
+    .${resizerHandleLeftClassName},
+    .${resizerItemClassName}:hover
+    .${resizerHandleRightClassName} {
+    visibility: visible;
+  }
+
   .${resizerItemClassName}:hover
     .${resizerHandleLeftClassName}::after,
     .${resizerItemClassName}:hover

package/dist/es2019/styles/shared/table.js

@@ -32,7 +32,8 @@ export const TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,
   TABLE_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
-  TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`
+  TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
+  TABLE_RESIZER_CONTAINER: `${tablePrefixSelector}-resizer-container`
 };
 const tableSharedStyle = props => css`
   ${tableCellBackgroundStyleOverride()}
@@ -206,12 +207,12 @@ const tableSharedStyle = props => css`
 export const calcTableWidth = (layout, containerWidth, addControllerPadding = true) => {
   switch (layout) {
     case 'full-width':
-      return containerWidth ? `${Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth)}px` : `${akEditorFullWidthLayoutWidth}px`;
+      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
     case 'wide':
       if (containerWidth) {
-        return `${Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth)}px`;
+        return Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth);
       }
-      return `${akEditorWideLayoutWidth}px`;
+      return akEditorWideLayoutWidth;
     default:
       return 'inherit';
   }

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.6.0",
+	"version": "74.7.0",
 	"sideEffects": false
 }

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/node-width/index.js

@@ -1,10 +1,15 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
+export var layoutToWidth = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+};
 
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
@@ -76,4 +81,10 @@ var getNestedParentNode = function getNestedParentNode(tablePos, state) {
 };
 var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
+};
+export var getTableContainerWidth = function getTableContainerWidth(node) {
+  if (node.attrs.width) {
+    return node.attrs.width;
+  }
+  return layoutToWidth[node.attrs.layout];
 };

package/dist/esm/resizer/Resizer.js

@@ -12,7 +12,9 @@ export default function ResizerNext(props) {
     _props$handlerHeightS = props.handlerHeightSize,
     handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS,
     _props$handleAlignmen = props.handleAlignmentMethod,
-    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen;
+    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
+    _props$resizeRatio = props.resizeRatio,
+    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio;
   var onResizeStart = React.useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
@@ -83,6 +85,7 @@ export default function ResizerNext(props) {
     ,
     onResizeStart: onResizeStart,
     onResize: onResize,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    resizeRatio: resizeRatio
   }, props.children);
 }

package/dist/esm/styles/shared/resizer.js

@@ -24,4 +24,4 @@ export var resizerHandlerClassName = {
   medium: resizerHandlerMediumClassName,
   large: resizerHandlerLargeClassName
 };
-export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);
+export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", " {\n    visibility: visible;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);

package/dist/esm/styles/shared/table.js

@@ -34,7 +34,8 @@ export var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,
   TABLE_ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-row-controls-wrapper"),
-  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration")
+  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
+  TABLE_RESIZER_CONTAINER: "".concat(tablePrefixSelector, "-resizer-container")
 };
 var tableSharedStyle = function tableSharedStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
@@ -81,12 +82,12 @@ export var calcTableWidth = function calcTableWidth(layout, containerWidth) {
   var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   switch (layout) {
     case 'full-width':
-      return containerWidth ? "".concat(Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth), "px") : "".concat(akEditorFullWidthLayoutWidth, "px");
+      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
     case 'wide':
       if (containerWidth) {
-        return "".concat(Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth), "px");
+        return Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth);
       }
-      return "".concat(akEditorWideLayoutWidth, "px");
+      return akEditorWideLayoutWidth;
     default:
       return 'inherit';
   }

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.6.0",
+	"version": "74.7.0",
 	"sideEffects": false
 }

package/dist/types/node-width/index.d.ts

@@ -1,7 +1,14 @@
+import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { EditorContainerWidth } from '../types/editor-container-width';
+export declare const layoutToWidth: {
+    default: number;
+    wide: number;
+    'full-width': number;
+};
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
  * If current node selection is not nested will return undefined
  */
 export declare const getParentNodeWidth: (pos: number | undefined, state: EditorState, containerWidth: EditorContainerWidth, isFullWidthModeEnabled?: boolean) => any;
+export declare const getTableContainerWidth: (node: PMNode) => number;

package/dist/types/resizer/Resizer.d.ts

@@ -20,5 +20,6 @@ export type ResizerProps = {
     handleComponent?: HandleComponent;
     handlerHeightSize?: HandlerHeightSizeType;
     handleAlignmentMethod?: HandleAlignmentMethod;
+    resizeRatio?: number;
 };
 export default function ResizerNext(props: PropsWithChildren<ResizerProps>): JSX.Element;

package/dist/types/styles/shared/table.d.ts

@@ -25,7 +25,8 @@ export declare const TableSharedCssClassName: {
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;
+    TABLE_RESIZER_CONTAINER: string;
 };
 declare const tableSharedStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const calcTableWidth: (layout: TableLayout, containerWidth?: number, addControllerPadding?: boolean) => string;
+export declare const calcTableWidth: (layout: TableLayout, containerWidth?: number, addControllerPadding?: boolean) => number | 'inherit';
 export { tableSharedStyle };

package/dist/types-ts4.5/node-width/index.d.ts

@@ -1,7 +1,14 @@
+import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { EditorContainerWidth } from '../types/editor-container-width';
+export declare const layoutToWidth: {
+    default: number;
+    wide: number;
+    'full-width': number;
+};
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
  * If current node selection is not nested will return undefined
  */
 export declare const getParentNodeWidth: (pos: number | undefined, state: EditorState, containerWidth: EditorContainerWidth, isFullWidthModeEnabled?: boolean) => any;
+export declare const getTableContainerWidth: (node: PMNode) => number;

package/dist/types-ts4.5/resizer/Resizer.d.ts

@@ -20,5 +20,6 @@ export type ResizerProps = {
     handleComponent?: HandleComponent;
     handlerHeightSize?: HandlerHeightSizeType;
     handleAlignmentMethod?: HandleAlignmentMethod;
+    resizeRatio?: number;
 };
 export default function ResizerNext(props: PropsWithChildren<ResizerProps>): JSX.Element;

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

@@ -25,7 +25,8 @@ export declare const TableSharedCssClassName: {
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;
+    TABLE_RESIZER_CONTAINER: string;
 };
 declare const tableSharedStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const calcTableWidth: (layout: TableLayout, containerWidth?: number, addControllerPadding?: boolean) => string;
+export declare const calcTableWidth: (layout: TableLayout, containerWidth?: number, addControllerPadding?: boolean) => number | 'inherit';
 export { tableSharedStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.6.0",
+  "version": "74.7.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -71,7 +71,7 @@
   "dependencies": {
     "@atlaskit/activity-provider": "^2.4.0",
     "@atlaskit/adf-schema": "^25.8.0",
-    "@atlaskit/adf-utils": "^18.3.0",
+    "@atlaskit/adf-utils": "^18.4.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
@@ -142,14 +142,13 @@
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
-    "@atlaskit/editor-plugin-table": "^1.5.0",
+    "@atlaskit/editor-plugin-table": "^1.6.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.6.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/util-data-test": "^17.8.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@sentry/types": "^6.18.2",
     "@testing-library/jest-dom": "^5.16.5",