@atlaskit/editor-common 107.1.1 → 107.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-common
 
+## 107.2.1
+
+### Patch Changes
+
+- [#174265](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174265)
+  [`20a7224f572b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20a7224f572b5) -
+  [ux] ED-28338: Fix layout guideline not visible on full width page
+- Updated dependencies
+
+## 107.2.0
+
+### Minor Changes
+
+- [#172318](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172318)
+  [`cb1aac3653c7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb1aac3653c7e) -
+  Fix breakout inline SSR parcel build issue
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 107.1.1
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 = "107.1.0";
+var packageVersion = "107.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/useBreakoutGuidelines.js

@@ -9,6 +9,8 @@ exports.useBreakoutGuidelines = useBreakoutGuidelines;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var SNAP_GAP = exports.SNAP_GAP = 8;
 var GUIDELINE_KEYS = {
   lineLength: 'grid',
@@ -34,13 +36,20 @@ function useBreakoutGuidelines(getEditorWidth, isResizing) {
       var _ref = widthState || {},
         width = _ref.width,
         lineLength = _ref.lineLength;
-      var wide = lineLength ? Math.round(lineLength * _editorSharedStyles.breakoutWideScaleRatio) : undefined;
+      var wideCalWithRatio = lineLength ? Math.round(lineLength * _editorSharedStyles.breakoutWideScaleRatio) : undefined;
+      // When page is full width, lineLength from widthState can be much wider than 760.
+      // But the lineLength variable here is being used like a const 760.
+      // when the page is full width, the calculation of wide is wrong.
+      // Actuall the wide is the wide breakout point, which is
+      var wide = (0, _experiments.editorExperiment)('single_column_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_layout_guideline_full_width_fix') ? _editorSharedStyles.akEditorCalculatedWideLayoutWidth : wideCalWithRatio;
       var layoutCalculatedWidth = width ? width - ((0, _editorSharedStyles.akEditorGutterPaddingDynamic)() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
       var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth) : undefined;
       return {
         wide: wide,
         fullWidth: fullWidth,
-        lineLength: lineLength
+        // When page is full width, lineLength from widthState can be much wider than 760.
+        // But the lineLength variable here is being used like a const 760.
+        lineLength: (0, _experiments.editorExperiment)('single_column_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_layout_guideline_full_width_fix') ? _editorSharedStyles.akEditorDefaultLayoutWidth : lineLength
       };
     }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
     lineLength = _useMemo.lineLength,
@@ -49,7 +58,7 @@ function useBreakoutGuidelines(getEditorWidth, isResizing) {
 
   // calculate snapping width
   var defaultSnappingWidths = (0, _react.useMemo)(function () {
-    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= ((0, _experiments.editorExperiment)('single_column_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_layout_guideline_full_width_fix') ? _editorSharedStyles.akEditorDefaultLayoutWidth : lineLength)) {
       return null;
     }
     if (fullWidth - wide > SNAP_GAP) {

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.1.0";
+var packageVersion = "107.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/utils/breakout.js

@@ -32,48 +32,56 @@ var breakoutConsts = exports.breakoutConsts = {
   /**
    * This function can return percentage value or px value depending upon the inputs
    */
-  calcBreakoutWidth: function calcBreakoutWidth(layout, containerWidth, padding) {
-    var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
-    switch (layout) {
-      case 'full-width':
-        return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
-      case 'wide':
-        if (effectiveFullWidth <= 0) {
-          return '100%';
-        }
-        var wideWidth = breakoutConsts.calcWideWidth(containerWidth, undefined, undefined, padding);
-        if (wideWidth.endsWith('%')) {
+  calcBreakoutWidth: function calcBreakoutWidth(breakoutConsts) {
+    return function (layout, containerWidth, padding) {
+      var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
+      switch (layout) {
+        case 'full-width':
           return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
-        }
-        return wideWidth;
-      default:
-        return '100%';
-    }
+        case 'wide':
+          if (effectiveFullWidth <= 0) {
+            return '100%';
+          }
+          var wideWidth = breakoutConsts.calcWideWidth(breakoutConsts)(containerWidth, undefined, undefined, padding);
+          if (wideWidth.endsWith('%')) {
+            return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
+          }
+          return wideWidth;
+        default:
+          return '100%';
+      }
+    };
   },
-  calcBreakoutWithCustomWidth: function calcBreakoutWithCustomWidth(mode, width, editorContainerWidth) {
-    if (width !== null && width > 0) {
-      var effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
-      // if below 0 then expect we're rendering in SSR
-      return "".concat(Math.min(width, effectiveFullWidth), "px");
-    }
-    return breakoutConsts.calcBreakoutWidth(mode, editorContainerWidth);
+  calcBreakoutWithCustomWidth: function calcBreakoutWithCustomWidth(breakoutConsts) {
+    return function (mode, width, editorContainerWidth) {
+      if (width !== null && width > 0) {
+        var effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
+        // if below 0 then expect we're rendering in SSR
+        return "".concat(Math.min(width, effectiveFullWidth), "px");
+      }
+      return breakoutConsts.calcBreakoutWidth(breakoutConsts)(mode, editorContainerWidth);
+    };
   },
-  calcLineLength: function calcLineLength() {
-    return breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength(breakoutConsts) {
+    return function () {
+      return breakoutConsts.defaultLayoutWidth;
+    };
   },
-  calcWideWidth: function calcWideWidth() {
-    var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;
-    var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
-    var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
-    var padding = arguments.length > 3 ? arguments[3] : undefined;
-    var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
-    var layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
-    var wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
-    return layoutMaxWidth > wideWidth ? fallback : "".concat(Math.min(maxWidth, wideWidth), "px");
+  calcWideWidth: function calcWideWidth(breakoutConsts) {
+    return function () {
+      var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;
+      var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
+      var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
+      var padding = arguments.length > 3 ? arguments[3] : undefined;
+      var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
+      var layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
+      var wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
+      return layoutMaxWidth > wideWidth ? fallback : "".concat(Math.min(maxWidth, wideWidth), "px");
+    };
   }
 };
 var absoluteBreakoutWidth = exports.absoluteBreakoutWidth = function absoluteBreakoutWidth(layout, containerWidth) {
-  var breakoutWidth = breakoutConsts.calcBreakoutWidth(layout, containerWidth);
+  var breakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts)(layout, containerWidth);
 
   // If it's percent, map to max layout size
   if (breakoutWidth.endsWith('%')) {
@@ -88,9 +96,9 @@ var absoluteBreakoutWidth = exports.absoluteBreakoutWidth = function absoluteBre
   }
   return parseInt(breakoutWidth, 10);
 };
-var calcWideWidth = exports.calcWideWidth = breakoutConsts.calcWideWidth;
-var calcBreakoutWidth = exports.calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
-var calcBreakoutWithCustomWidth = exports.calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth;
+var calcWideWidth = exports.calcWideWidth = breakoutConsts.calcWideWidth(breakoutConsts);
+var calcBreakoutWidth = exports.calcBreakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts);
+var calcBreakoutWithCustomWidth = exports.calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts);
 function calculateBreakoutStyles(_ref) {
   var mode = _ref.mode,
     widthStateLineLength = _ref.widthStateLineLength,

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 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 = "107.1.0";
+const packageVersion = "107.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/resizer/useBreakoutGuidelines.js

@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const SNAP_GAP = 8;
 const GUIDELINE_KEYS = {
   lineLength: 'grid',
@@ -26,19 +28,26 @@ export function useBreakoutGuidelines(getEditorWidth, isResizing, dynamicFullWid
       width,
       lineLength
     } = widthState || {};
-    const wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+    const wideCalWithRatio = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+    // When page is full width, lineLength from widthState can be much wider than 760.
+    // But the lineLength variable here is being used like a const 760.
+    // when the page is full width, the calculation of wide is wrong.
+    // Actuall the wide is the wide breakout point, which is
+    const wide = editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorCalculatedWideLayoutWidth : wideCalWithRatio;
     const layoutCalculatedWidth = width ? width - (akEditorGutterPaddingDynamic() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
     const fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, akEditorFullWidthLayoutWidth) : undefined;
     return {
       wide,
       fullWidth,
-      lineLength
+      // When page is full width, lineLength from widthState can be much wider than 760.
+      // But the lineLength variable here is being used like a const 760.
+      lineLength: editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorDefaultLayoutWidth : lineLength
     };
   }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]);
 
   // calculate snapping width
   const defaultSnappingWidths = useMemo(() => {
-    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= (editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorDefaultLayoutWidth : lineLength)) {
       return null;
     }
     if (fullWidth - wide > SNAP_GAP) {

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "107.1.0";
+const packageVersion = "107.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/utils/breakout.js

@@ -22,7 +22,7 @@ const breakoutConsts = {
   /**
    * This function can return percentage value or px value depending upon the inputs
    */
-  calcBreakoutWidth: (layout, containerWidth, padding) => {
+  calcBreakoutWidth: breakoutConsts => (layout, containerWidth, padding) => {
     const effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
     switch (layout) {
       case 'full-width':
@@ -31,7 +31,7 @@ const breakoutConsts = {
         if (effectiveFullWidth <= 0) {
           return '100%';
         }
-        const wideWidth = breakoutConsts.calcWideWidth(containerWidth, undefined, undefined, padding);
+        const wideWidth = breakoutConsts.calcWideWidth(breakoutConsts)(containerWidth, undefined, undefined, padding);
         if (wideWidth.endsWith('%')) {
           return `${Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth)}px`;
         }
@@ -40,16 +40,16 @@ const breakoutConsts = {
         return '100%';
     }
   },
-  calcBreakoutWithCustomWidth: (mode, width, editorContainerWidth) => {
+  calcBreakoutWithCustomWidth: breakoutConsts => (mode, width, editorContainerWidth) => {
     if (width !== null && width > 0) {
       const effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
       // if below 0 then expect we're rendering in SSR
       return `${Math.min(width, effectiveFullWidth)}px`;
     }
-    return breakoutConsts.calcBreakoutWidth(mode, editorContainerWidth);
+    return breakoutConsts.calcBreakoutWidth(breakoutConsts)(mode, editorContainerWidth);
   },
-  calcLineLength: () => breakoutConsts.defaultLayoutWidth,
-  calcWideWidth: (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%', padding) => {
+  calcLineLength: breakoutConsts => () => breakoutConsts.defaultLayoutWidth,
+  calcWideWidth: breakoutConsts => (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%', padding) => {
     const effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
     const layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
     const wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
@@ -57,7 +57,7 @@ const breakoutConsts = {
   }
 };
 export const absoluteBreakoutWidth = (layout, containerWidth) => {
-  const breakoutWidth = breakoutConsts.calcBreakoutWidth(layout, containerWidth);
+  const breakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts)(layout, containerWidth);
 
   // If it's percent, map to max layout size
   if (breakoutWidth.endsWith('%')) {
@@ -73,9 +73,9 @@ export const absoluteBreakoutWidth = (layout, containerWidth) => {
   return parseInt(breakoutWidth, 10);
 };
 export { breakoutConsts };
-export const calcWideWidth = breakoutConsts.calcWideWidth;
-export const calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
-export const calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth;
+export const calcWideWidth = breakoutConsts.calcWideWidth(breakoutConsts);
+export const calcBreakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts);
+export const calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts);
 export function calculateBreakoutStyles({
   mode,
   widthStateLineLength,

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "107.1.0";
+var packageVersion = "107.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/resizer/useBreakoutGuidelines.js

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useMemo, useState } from 'react';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var SNAP_GAP = 8;
 var GUIDELINE_KEYS = {
   lineLength: 'grid',
@@ -26,13 +28,20 @@ export function useBreakoutGuidelines(getEditorWidth, isResizing) {
       var _ref = widthState || {},
         width = _ref.width,
         lineLength = _ref.lineLength;
-      var wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+      var wideCalWithRatio = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+      // When page is full width, lineLength from widthState can be much wider than 760.
+      // But the lineLength variable here is being used like a const 760.
+      // when the page is full width, the calculation of wide is wrong.
+      // Actuall the wide is the wide breakout point, which is
+      var wide = editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorCalculatedWideLayoutWidth : wideCalWithRatio;
       var layoutCalculatedWidth = width ? width - (akEditorGutterPaddingDynamic() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
       var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, akEditorFullWidthLayoutWidth) : undefined;
       return {
         wide: wide,
         fullWidth: fullWidth,
-        lineLength: lineLength
+        // When page is full width, lineLength from widthState can be much wider than 760.
+        // But the lineLength variable here is being used like a const 760.
+        lineLength: editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorDefaultLayoutWidth : lineLength
       };
     }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
     lineLength = _useMemo.lineLength,
@@ -41,7 +50,7 @@ export function useBreakoutGuidelines(getEditorWidth, isResizing) {
 
   // calculate snapping width
   var defaultSnappingWidths = useMemo(function () {
-    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= (editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix') ? akEditorDefaultLayoutWidth : lineLength)) {
       return null;
     }
     if (fullWidth - wide > SNAP_GAP) {

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.1.0";
+var packageVersion = "107.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/utils/breakout.js

@@ -22,48 +22,56 @@ var breakoutConsts = {
   /**
    * This function can return percentage value or px value depending upon the inputs
    */
-  calcBreakoutWidth: function calcBreakoutWidth(layout, containerWidth, padding) {
-    var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
-    switch (layout) {
-      case 'full-width':
-        return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
-      case 'wide':
-        if (effectiveFullWidth <= 0) {
-          return '100%';
-        }
-        var wideWidth = breakoutConsts.calcWideWidth(containerWidth, undefined, undefined, padding);
-        if (wideWidth.endsWith('%')) {
+  calcBreakoutWidth: function calcBreakoutWidth(breakoutConsts) {
+    return function (layout, containerWidth, padding) {
+      var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
+      switch (layout) {
+        case 'full-width':
           return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
-        }
-        return wideWidth;
-      default:
-        return '100%';
-    }
+        case 'wide':
+          if (effectiveFullWidth <= 0) {
+            return '100%';
+          }
+          var wideWidth = breakoutConsts.calcWideWidth(breakoutConsts)(containerWidth, undefined, undefined, padding);
+          if (wideWidth.endsWith('%')) {
+            return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
+          }
+          return wideWidth;
+        default:
+          return '100%';
+      }
+    };
   },
-  calcBreakoutWithCustomWidth: function calcBreakoutWithCustomWidth(mode, width, editorContainerWidth) {
-    if (width !== null && width > 0) {
-      var effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
-      // if below 0 then expect we're rendering in SSR
-      return "".concat(Math.min(width, effectiveFullWidth), "px");
-    }
-    return breakoutConsts.calcBreakoutWidth(mode, editorContainerWidth);
+  calcBreakoutWithCustomWidth: function calcBreakoutWithCustomWidth(breakoutConsts) {
+    return function (mode, width, editorContainerWidth) {
+      if (width !== null && width > 0) {
+        var effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
+        // if below 0 then expect we're rendering in SSR
+        return "".concat(Math.min(width, effectiveFullWidth), "px");
+      }
+      return breakoutConsts.calcBreakoutWidth(breakoutConsts)(mode, editorContainerWidth);
+    };
   },
-  calcLineLength: function calcLineLength() {
-    return breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength(breakoutConsts) {
+    return function () {
+      return breakoutConsts.defaultLayoutWidth;
+    };
   },
-  calcWideWidth: function calcWideWidth() {
-    var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;
-    var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
-    var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
-    var padding = arguments.length > 3 ? arguments[3] : undefined;
-    var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
-    var layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
-    var wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
-    return layoutMaxWidth > wideWidth ? fallback : "".concat(Math.min(maxWidth, wideWidth), "px");
+  calcWideWidth: function calcWideWidth(breakoutConsts) {
+    return function () {
+      var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;
+      var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
+      var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
+      var padding = arguments.length > 3 ? arguments[3] : undefined;
+      var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
+      var layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
+      var wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
+      return layoutMaxWidth > wideWidth ? fallback : "".concat(Math.min(maxWidth, wideWidth), "px");
+    };
   }
 };
 export var absoluteBreakoutWidth = function absoluteBreakoutWidth(layout, containerWidth) {
-  var breakoutWidth = breakoutConsts.calcBreakoutWidth(layout, containerWidth);
+  var breakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts)(layout, containerWidth);
 
   // If it's percent, map to max layout size
   if (breakoutWidth.endsWith('%')) {
@@ -79,9 +87,9 @@ export var absoluteBreakoutWidth = function absoluteBreakoutWidth(layout, contai
   return parseInt(breakoutWidth, 10);
 };
 export { breakoutConsts };
-export var calcWideWidth = breakoutConsts.calcWideWidth;
-export var calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
-export var calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth;
+export var calcWideWidth = breakoutConsts.calcWideWidth(breakoutConsts);
+export var calcBreakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts);
+export var calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts);
 export function calculateBreakoutStyles(_ref) {
   var mode = _ref.mode,
     widthStateLineLength = _ref.widthStateLineLength,

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

@@ -17,9 +17,9 @@ export type BreakoutConstsType = {
     mapBreakpointToLayoutMaxWidth: typeof mapBreakpointToLayoutMaxWidth;
     getBreakpoint: typeof getBreakpoint;
     calcBreakoutWidth: any;
-    calcBreakoutWithCustomWidth: (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
-    calcLineLength: () => number;
-    calcWideWidth: (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
+    calcBreakoutWithCustomWidth: (breakoutConsts: BreakoutConstsType) => (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
+    calcLineLength: (breakoutConsts: BreakoutConstsType) => () => number;
+    calcWideWidth: (breakoutConsts: BreakoutConstsType) => (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
 };
 declare const breakoutConsts: BreakoutConstsType;
 export declare const absoluteBreakoutWidth: (layout: 'full-width' | 'wide' | string, containerWidth: number) => number;

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

@@ -17,9 +17,9 @@ export type BreakoutConstsType = {
     mapBreakpointToLayoutMaxWidth: typeof mapBreakpointToLayoutMaxWidth;
     getBreakpoint: typeof getBreakpoint;
     calcBreakoutWidth: any;
-    calcBreakoutWithCustomWidth: (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
-    calcLineLength: () => number;
-    calcWideWidth: (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
+    calcBreakoutWithCustomWidth: (breakoutConsts: BreakoutConstsType) => (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
+    calcLineLength: (breakoutConsts: BreakoutConstsType) => () => number;
+    calcWideWidth: (breakoutConsts: BreakoutConstsType) => (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
 };
 declare const breakoutConsts: BreakoutConstsType;
 export declare const absoluteBreakoutWidth: (layout: 'full-width' | 'wide' | string, containerWidth: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "107.1.1",
+	"version": "107.2.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -147,12 +147,12 @@
 		"@atlaskit/link-datasource": "^4.11.0",
 		"@atlaskit/link-picker": "^3.5.0",
 		"@atlaskit/media-card": "^79.3.0",
-		"@atlaskit/media-client": "^34.0.0",
+		"@atlaskit/media-client": "^34.1.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.2.0",
 		"@atlaskit/media-file-preview": "^0.11.0",
 		"@atlaskit/media-picker": "^70.0.0",
-		"@atlaskit/media-ui": "^28.3.0",
+		"@atlaskit/media-ui": "^28.4.0",
 		"@atlaskit/media-viewer": "^52.3.0",
 		"@atlaskit/mention": "^24.2.0",
 		"@atlaskit/menu": "^8.0.0",
@@ -161,16 +161,16 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/primitives": "^14.9.0",
-		"@atlaskit/profilecard": "^23.20.0",
+		"@atlaskit/profilecard": "^23.21.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^38.13.0",
+		"@atlaskit/smart-card": "^38.14.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.0.0",
+		"@atlaskit/tmp-editor-statsig": "^8.1.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -299,6 +299,9 @@
 		"platform_editor_inline_node_virt_threshold_override": {
 			"type": "boolean"
 		},
+		"platform_editor_layout_guideline_full_width_fix": {
+			"type": "boolean"
+		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},
@@ -314,9 +317,6 @@
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
 		},
-		"platform_editor_lcm_nested_panel_icon_fix": {
-			"type": "boolean"
-		},
 		"editor_a11y_aria_label_removal_popup": {
 			"type": "boolean"
 		},