@atlaskit/editor-common 115.5.1 → 115.6.0

package/dist/cjs/transforms/list-utils.js

@@ -1,44 +1,48 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "convertBlockToInlineContent", {
-  enumerable: true,
-  get: function get() {
-    return _convertBlockToInlineContent.convertBlockToInlineContent;
-  }
-});
-Object.defineProperty(exports, "getSupportedListTypes", {
-  enumerable: true,
-  get: function get() {
-    return _getSupportedListTypes.getSupportedListTypes;
-  }
-});
-exports.getSupportedListTypesSet = void 0;
-Object.defineProperty(exports, "isBulletOrOrderedList", {
-  enumerable: true,
-  get: function get() {
-    return _isBulletOrOrderedList.isBulletOrOrderedList;
-  }
-});
-Object.defineProperty(exports, "isTaskList", {
-  enumerable: true,
-  get: function get() {
-    return _isTaskList.isTaskList;
-  }
-});
-var _getSupportedListTypes = require("./getSupportedListTypes");
-var _isBulletOrOrderedList = require("./isBulletOrOrderedList");
-var _isTaskList = require("./isTaskList");
-var _convertBlockToInlineContent = require("./convertBlockToInlineContent");
+exports.isTaskList = exports.isBulletOrOrderedList = exports.getSupportedListTypesSet = exports.getSupportedListTypes = exports.convertBlockToInlineContent = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+// List type utilities
+var isBulletOrOrderedList = exports.isBulletOrOrderedList = function isBulletOrOrderedList(nodeType) {
+  return nodeType.name === 'bulletList' || nodeType.name === 'orderedList';
+};
+var isTaskList = exports.isTaskList = function isTaskList(nodeType) {
+  return nodeType.name === 'taskList';
+};
+var getSupportedListTypes = exports.getSupportedListTypes = function getSupportedListTypes(nodes) {
+  return [nodes.bulletList, nodes.orderedList, nodes.taskList].filter(Boolean);
+};
 var getSupportedListTypesSet = exports.getSupportedListTypesSet = function getSupportedListTypesSet(nodes) {
-  return new Set((0, _getSupportedListTypes.getSupportedListTypes)(nodes));
+  return new Set(getSupportedListTypes(nodes));
 };
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
 
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+/**
+ * Convert a block node to inline content suitable for task items
+ */
+var convertBlockToInlineContent = exports.convertBlockToInlineContent = function convertBlockToInlineContent(node, schema) {
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    hardBreak = _schema$nodes.hardBreak;
+  if (node.type === paragraph) {
+    return (0, _toConsumableArray2.default)(node.content.content);
+  }
+  if (node.isBlock) {
+    var textContent = node.textContent;
+    var lines = textContent.split('\n');
+    var newText = [];
+    lines.forEach(function (line, index) {
+      if (line !== '') {
+        newText.push(line ? schema.text(line) : schema.text(' '));
+      }
+      if (lines.length > 1 && index !== lines.length - 1) {
+        newText.push(hardBreak.create());
+      }
+    });
+    return newText;
+  }
+  return [node];
+};

package/dist/cjs/types/index.js

@@ -25,39 +25,35 @@ exports.SortOrder = void 0;
 Object.defineProperty(exports, "ToolbarSize", {
   enumerable: true,
   get: function get() {
-    return _ToolbarSize.ToolbarSize;
+    return _toolbar.ToolbarSize;
   }
 });
 Object.defineProperty(exports, "ToolbarWidths", {
   enumerable: true,
   get: function get() {
-    return _ToolbarWidths.ToolbarWidths;
+    return _toolbar.ToolbarWidths;
   }
 });
 Object.defineProperty(exports, "ToolbarWidthsFullPage", {
   enumerable: true,
   get: function get() {
-    return _ToolbarWidthsFullPage.ToolbarWidthsFullPage;
+    return _toolbar.ToolbarWidthsFullPage;
   }
 });
 Object.defineProperty(exports, "ToolbarWidthsFullPageNext", {
   enumerable: true,
   get: function get() {
-    return _ToolbarWidthsFullPageNext.ToolbarWidthsFullPageNext;
+    return _toolbar.ToolbarWidthsFullPageNext;
   }
 });
 Object.defineProperty(exports, "ToolbarWidthsNext", {
   enumerable: true,
   get: function get() {
-    return _ToolbarWidthsNext.ToolbarWidthsNext;
+    return _toolbar.ToolbarWidthsNext;
   }
 });
 var _emitter = require("./annotation/emitter");
-var _ToolbarSize = require("./ToolbarSize");
-var _ToolbarWidths = require("./ToolbarWidths");
-var _ToolbarWidthsFullPage = require("./ToolbarWidthsFullPage");
-var _ToolbarWidthsFullPageNext = require("./ToolbarWidthsFullPageNext");
-var _ToolbarWidthsNext = require("./ToolbarWidthsNext");
+var _toolbar = require("./toolbar");
 var _blockControls = require("./block-controls");
 // Disable no-re-export rule for entry point files
 /* eslint-disable @atlaskit/editor/no-re-export */

package/dist/cjs/types/toolbar.js

@@ -3,38 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ToolbarSize", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarSize.ToolbarSize;
-  }
-});
-Object.defineProperty(exports, "ToolbarWidths", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarWidths.ToolbarWidths;
-  }
-});
-Object.defineProperty(exports, "ToolbarWidthsFullPage", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarWidthsFullPage.ToolbarWidthsFullPage;
-  }
-});
-Object.defineProperty(exports, "ToolbarWidthsFullPageNext", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarWidthsFullPageNext.ToolbarWidthsFullPageNext;
-  }
-});
-Object.defineProperty(exports, "ToolbarWidthsNext", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarWidthsNext.ToolbarWidthsNext;
-  }
-});
-var _ToolbarSize = require("./ToolbarSize");
-var _ToolbarWidths = require("./ToolbarWidths");
-var _ToolbarWidthsNext = require("./ToolbarWidthsNext");
-var _ToolbarWidthsFullPage = require("./ToolbarWidthsFullPage");
-var _ToolbarWidthsFullPageNext = require("./ToolbarWidthsFullPageNext");
+exports.ToolbarWidthsNext = exports.ToolbarWidthsFullPageNext = exports.ToolbarWidthsFullPage = exports.ToolbarWidths = exports.ToolbarSize = void 0;
+var ToolbarSize = exports.ToolbarSize = /*#__PURE__*/function (ToolbarSize) {
+  ToolbarSize[ToolbarSize["XXL"] = 6] = "XXL";
+  ToolbarSize[ToolbarSize["XL"] = 5] = "XL";
+  ToolbarSize[ToolbarSize["L"] = 4] = "L";
+  ToolbarSize[ToolbarSize["M"] = 3] = "M";
+  ToolbarSize[ToolbarSize["S"] = 2] = "S";
+  ToolbarSize[ToolbarSize["XXXS"] = 1] = "XXXS";
+  return ToolbarSize;
+}({}); // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
+/** @deprecated
+ * To be removed as part of ED-25129 in favour of ToolbarWidthsNext along with references
+ * to platform_editor_toolbar_responsive_fixes feature gate
+ */
+var ToolbarWidths = exports.ToolbarWidths = /*#__PURE__*/function (ToolbarWidths) {
+  ToolbarWidths[ToolbarWidths["XXL"] = 610] = "XXL";
+  ToolbarWidths[ToolbarWidths["XL"] = 540] = "XL";
+  ToolbarWidths[ToolbarWidths["L"] = 460] = "L";
+  ToolbarWidths[ToolbarWidths["M"] = 450] = "M";
+  ToolbarWidths[ToolbarWidths["S"] = 410] = "S";
+  return ToolbarWidths;
+}({});
+var ToolbarWidthsNext = exports.ToolbarWidthsNext = /*#__PURE__*/function (ToolbarWidthsNext) {
+  ToolbarWidthsNext[ToolbarWidthsNext["XXL"] = 768] = "XXL";
+  ToolbarWidthsNext[ToolbarWidthsNext["XL"] = 576] = "XL";
+  ToolbarWidthsNext[ToolbarWidthsNext["L"] = 460] = "L";
+  ToolbarWidthsNext[ToolbarWidthsNext["M"] = 450] = "M";
+  ToolbarWidthsNext[ToolbarWidthsNext["S"] = 410] = "S";
+  return ToolbarWidthsNext;
+}({}); // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
+/** @deprecated
+ * To be removed as part of ED-25129 in favour of ToolbarWidthsFullPageNext along with references
+ * to platform_editor_toolbar_responsive_fixes feature gate
+ */
+var ToolbarWidthsFullPage = exports.ToolbarWidthsFullPage = /*#__PURE__*/function (ToolbarWidthsFullPage) {
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XXL"] = 650] = "XXL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XL"] = 580] = "XL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["L"] = 540] = "L";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["M"] = 490] = "M";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["S"] = 410] = "S";
+  return ToolbarWidthsFullPage;
+}({});
+var ToolbarWidthsFullPageNext = exports.ToolbarWidthsFullPageNext = /*#__PURE__*/function (ToolbarWidthsFullPageNext) {
+  ToolbarWidthsFullPageNext[ToolbarWidthsFullPageNext["XXL"] = 1200] = "XXL";
+  ToolbarWidthsFullPageNext[ToolbarWidthsFullPageNext["XL"] = 992] = "XL";
+  ToolbarWidthsFullPageNext[ToolbarWidthsFullPageNext["L"] = 768] = "L";
+  ToolbarWidthsFullPageNext[ToolbarWidthsFullPageNext["M"] = 576] = "M";
+  ToolbarWidthsFullPageNext[ToolbarWidthsFullPageNext["S"] = 410] = "S";
+  return ToolbarWidthsFullPageNext;
+}({});

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

@@ -24,7 +24,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 = "115.5.0";
+var packageVersion = "115.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -16,7 +16,6 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _Pulse = require("../Pulse/Pulse");
-var _iconOnlySpacing = require("./iconOnlySpacing");
 var _styles = require("./styles");
 var _excluded = ["buttonStyles"];
 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" != _typeof3(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); }
@@ -61,7 +60,7 @@ var FloatingToolbarButton = function FloatingToolbarButton(_ref, forwardedRef) {
     areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
-  var customSpacing = iconOnly ? _iconOnlySpacing.iconOnlySpacing : {};
+  var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
   var isButtonPressed = ariaHasPopup ? undefined : selected;
   /**
    * If it's a radio button, we need to reflect false values too, hence

package/dist/cjs/ui/FloatingToolbar/styles.js

@@ -3,7 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getButtonStyles = void 0;
+exports.iconOnlySpacing = exports.getButtonStyles = void 0;
+var iconOnlySpacing = exports.iconOnlySpacing = {
+  '&&': {
+    padding: '0px'
+  },
+  '& > span': {
+    margin: '0px'
+  }
+};
 var getStyles = function getStyles(property, _ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
@@ -56,5 +64,4 @@ var getButtonStyles = exports.getButtonStyles = function getButtonStyles(props)
     background: getStyles(backgroundVisualRefresh, props),
     color: getStyles(colorVisualRefresh, props)
   };
-};
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+};

package/dist/cjs/ui/Layer/internal/helpers.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.POSITION_ATTRIBUTE_ENUM = void 0;
 exports.positionPropToPopperPosition = positionPropToPopperPosition;
-var _POSITION_ATTRIBUTE_ENUM = require("./POSITION_ATTRIBUTE_ENUM");
 var positionMap = {
   'top left': {
     position: 'top-start',
@@ -55,10 +55,13 @@ var positionMap = {
     animation: 'left'
   }
 };
+var POSITION_ATTRIBUTE_ENUM = exports.POSITION_ATTRIBUTE_ENUM = {
+  values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
+  default: 'right middle'
+};
 function positionToPopper(position) {
   return position && positionMap[position] ? positionMap[position].position : null;
 }
 function positionPropToPopperPosition(position) {
-  return positionToPopper(position) || positionMap[_POSITION_ATTRIBUTE_ENUM.POSITION_ATTRIBUTE_ENUM.default].position;
-}
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+  return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
+}

package/dist/cjs/ui/MediaSingle/grid.js

@@ -3,51 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "calcColumnsFromPx", {
-  enumerable: true,
-  get: function get() {
-    return _calcColumnsFromPx.calcColumnsFromPx;
-  }
-});
+exports.calcColumnsFromPx = calcColumnsFromPx;
 exports.calcMediaPxWidth = void 0;
-Object.defineProperty(exports, "calcPctFromPx", {
-  enumerable: true,
-  get: function get() {
-    return _calcPctFromPx.calcPctFromPx;
-  }
-});
+exports.calcPctFromPx = calcPctFromPx;
 exports.calcPctWidth = void 0;
-Object.defineProperty(exports, "calcPxFromColumns", {
-  enumerable: true,
-  get: function get() {
-    return _calcPxFromColumns.calcPxFromColumns;
-  }
-});
-Object.defineProperty(exports, "calcPxFromPct", {
-  enumerable: true,
-  get: function get() {
-    return _calcPxFromPct.calcPxFromPct;
-  }
-});
-exports.snapToGrid = exports.layoutSupportsWidth = void 0;
-Object.defineProperty(exports, "wrappedLayouts", {
-  enumerable: true,
-  get: function get() {
-    return _wrappedLayouts.wrappedLayouts;
-  }
-});
+exports.calcPxFromColumns = calcPxFromColumns;
+exports.calcPxFromPct = calcPxFromPct;
+exports.wrappedLayouts = exports.snapToGrid = exports.layoutSupportsWidth = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _calcColumnsFromPx = require("./calcColumnsFromPx");
-var _calcPxFromColumns = require("./calcPxFromColumns");
-var _calcPxFromPct = require("./calcPxFromPct");
-var _wrappedLayouts = require("./wrappedLayouts");
-var _calcPctFromPx = require("./calcPctFromPx");
+var _constants = require("../../media-single/constants");
 var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
 var layoutSupportsWidth = exports.layoutSupportsWidth = function layoutSupportsWidth(layout) {
   return validWidthModes.indexOf(layout) > -1;
 };
+function calcPxFromColumns(columns, lineLength, gridSize) {
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth / gridSize * columns - _constants.MEDIA_SINGLE_GUTTER_SIZE;
+}
+function calcColumnsFromPx(width, lineLength, gridSize) {
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
+}
+function calcPxFromPct(pct, lineLength) {
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - _constants.MEDIA_SINGLE_GUTTER_SIZE;
+}
+function calcPctFromPx(width, lineLength) {
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
+}
+var wrappedLayouts = exports.wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 var calcPctWidth = exports.calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
-  return pctWidth && origWidth && origHeight && Math.ceil((0, _calcPxFromPct.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+  return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };
 var calcMediaPxWidth = exports.calcMediaPxWidth = function calcMediaPxWidth(opts) {
   var origWidth = opts.origWidth,
@@ -70,7 +57,7 @@ var calcMediaPxWidth = exports.calcMediaPxWidth = function calcMediaPxWidth(opts
   } else if (calculatedPctWidth) {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    if (_wrappedLayouts.wrappedLayouts.indexOf(layout) > -1) {
+    if (wrappedLayouts.indexOf(layout) > -1) {
       if (calculatedResizedPctWidth) {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -90,28 +77,19 @@ var calcMediaPxWidth = exports.calcMediaPxWidth = function calcMediaPxWidth(opts
       return calculatedResizedPctWidth;
     }
     return Math.min(origWidth, lineLength || width);
-  } else if (layout && _wrappedLayouts.wrappedLayouts.indexOf(layout) !== -1) {
+  } else if (layout && wrappedLayouts.indexOf(layout) !== -1) {
     // when layout is wrap-left, wrap-right, align-start, align-end
     // but no pctWidth is defined
-    return Math.min((0, _calcPxFromPct.calcPxFromPct)(0.5, lineLength || width), origWidth);
+    return Math.min(calcPxFromPct(0.5, lineLength || width), origWidth);
   }
   return origWidth;
 };
 var snapToGrid = exports.snapToGrid = function snapToGrid(gridWidth, width, height, lineLength, gridSize) {
-  var pxWidth = (0, _calcPxFromPct.calcPxFromPct)(gridWidth / 100, lineLength);
-  var columnSpan = Math.round((0, _calcColumnsFromPx.calcColumnsFromPx)(pxWidth, lineLength, gridSize));
-  var alignedWidth = (0, _calcPxFromColumns.calcPxFromColumns)(columnSpan, lineLength, gridSize);
+  var pxWidth = calcPxFromPct(gridWidth / 100, lineLength);
+  var columnSpan = Math.round(calcColumnsFromPx(pxWidth, lineLength, gridSize));
+  var alignedWidth = calcPxFromColumns(columnSpan, lineLength, gridSize);
   return {
     height: height / width * alignedWidth,
     width: alignedWidth
   };
-};
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+};

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

@@ -14,8 +14,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _vcMedia = require("@atlaskit/react-ufo/vc-media");
 var _constants = require("../../media-single/constants");
-var _getMediaSinglePixelWidth = require("../../media-single/getMediaSinglePixelWidth");
-var _shouldAddDefaultWrappedWidth = require("../../utils/shouldAddDefaultWrappedWidth");
+var _utils = require("../../media-single/utils");
+var _richMediaUtils = require("../../utils/rich-media-utils");
 var _styled = require("./styled");
 /**
  * @jsxRuntime classic
@@ -73,7 +73,7 @@ function MediaSingle(_ref) {
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && (0, _shouldAddDefaultWrappedWidth.shouldAddDefaultWrappedWidth)(layout, width, editorWidth)) {
+  if (!mediaSingleWidth && (0, _richMediaUtils.shouldAddDefaultWrappedWidth)(layout, width, editorWidth)) {
     // if width is not available, set to half of editor width
     mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }
@@ -82,7 +82,7 @@ function MediaSingle(_ref) {
   // embed height in relation to whatever width of an dom element is in runtime.
   var isHeightOnly = width === undefined;
   if (mediaSingleWidth) {
-    var pxWidth = (0, _getMediaSinglePixelWidth.getMediaSinglePixelWidth)(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, _constants.MEDIA_SINGLE_GUTTER_SIZE);
+    var pxWidth = (0, _utils.getMediaSinglePixelWidth)(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, _constants.MEDIA_SINGLE_GUTTER_SIZE);
     if (isHeightOnly) {
       width = pxWidth - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {

package/dist/cjs/ui/MediaSingle/styled.js

@@ -7,19 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.MediaWrapper = exports.MediaSingleDimensionHelper = exports.MediaBorderGapFiller = void 0;
 exports.calcLegacyWidth = calcLegacyWidth;
 exports.calcLegacyWidthForInline = calcLegacyWidthForInline;
-Object.defineProperty(exports, "calcResizedWidth", {
-  enumerable: true,
-  get: function get() {
-    return _calcResizedWidth.calcResizedWidth;
-  }
-});
+exports.calcResizedWidth = calcResizedWidth;
 exports.mediaWrapperStyle = void 0;
-Object.defineProperty(exports, "roundToClosestEvenPxValue", {
-  enumerable: true,
-  get: function get() {
-    return _roundToClosestEvenPxValue.roundToClosestEvenPxValue;
-  }
-});
+exports.roundToClosestEvenPxValue = roundToClosestEvenPxValue;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
@@ -28,8 +18,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
-var _calcResizedWidth = require("./calcResizedWidth");
-var _roundToClosestEvenPxValue = require("./roundToClosestEvenPxValue");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3;
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
@@ -126,6 +114,28 @@ function calcLegacyWidthForInline(layout, width) {
       return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
+
+/**
+ * Calculates the image width for previously resized images.
+ *
+ * Wide and full-width images are always that size (960px and 100%); there is
+ * no distinction between max-width and width.
+ * @param layout
+ * @param width
+ * @param containerWidth
+ * @example
+ */
+function calcResizedWidth(layout, width) {
+  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  switch (layout) {
+    case 'wide':
+      return (0, _breakout.calcWideWidth)(containerWidth);
+    case 'full-width':
+      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
+    default:
+      return "".concat(width, "px");
+  }
+}
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -156,6 +166,28 @@ function isImageAligned(layout) {
       return '';
   }
 }
+
+/**
+ * Reduces the given CSS width value to the next lowest even pixel value if the value is in px.
+ * This is to mitigate subpixel rendering issues of embedded smart links.
+ *
+ * @param widthValue CSS width value to be rounded
+ * @returns Reduced CSS width value where px value given, or otherwise the original value
+ * @example
+ */
+
+// widthValue could be a string in px, rem or percentage, e.g. "800px", "100%", etc.
+function roundToClosestEvenPxValue(widthValue) {
+  try {
+    if (widthValue.endsWith('px')) {
+      var pxWidth = parseInt(widthValue.slice(0, -2));
+      return "".concat(pxWidth - pxWidth % 2, "px");
+    }
+    return widthValue;
+  } catch (_unused) {
+    return widthValue;
+  }
+}
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
@@ -187,7 +219,7 @@ var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function M
     isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline,
     _ref$isInRenderer = _ref.isInRenderer,
     isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
-  var calculatedWidth = (0, _roundToClosestEvenPxValue.roundToClosestEvenPxValue)(isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? (0, _calcResizedWidth.calcResizedWidth)(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
+  var calculatedWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
   var cssMaxWidth = isExtendedResizeExperienceOn ? 'var(--ak-editor-max-container-width)' : calcMaxCssForPercentageTypeMedia(layout);
 
   // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
@@ -255,7 +287,4 @@ var MediaBorderGapFiller = exports.MediaBorderGapFiller = function MediaBorderGa
       borderRadius: borderRadius
     }
   });
-};
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+};

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

@@ -15,7 +15,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _shadowObserver = require("./shadowObserver");
-var _shadowObserverClassNames = require("./shadowObserverClassNames");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var shadowClassNames = exports.shadowClassNames = {
@@ -160,7 +159,7 @@ function overflowShadow(Component, options) {
         var _this$state = this.state,
           showLeftShadow = _this$state.showLeftShadow,
           showRightShadow = _this$state.showRightShadow;
-        var classNames = [!((_this$props = this.props) !== null && _this$props !== void 0 && _this$props.disableTableOverflowShadow) && showRightShadow && shadowClassNames.RIGHT_SHADOW, !((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.disableTableOverflowShadow) && showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && _shadowObserverClassNames.shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
+        var classNames = [!((_this$props = this.props) !== null && _this$props !== void 0 && _this$props.disableTableOverflowShadow) && showRightShadow && shadowClassNames.RIGHT_SHADOW, !((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.disableTableOverflowShadow) && showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && _shadowObserver.shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
 
         /**
          * The widths have already been calculated to determine