@atlaskit/editor-common 74.22.0 → 74.23.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 74.23.0
+
+### Minor Changes
+
+- [`5f028fb62a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f028fb62a1) - ED-19038 added mediaSingle.widthType support to renderer.
+
 ## 74.22.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.22.0";
+var packageVersion = "74.23.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/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.22.0";
+var packageVersion = "74.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -40,6 +40,7 @@ function MediaSingle(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     pctWidth = _ref.pctWidth,
+    size = _ref.size,
     className = _ref.className,
     propsChildren = _ref.children,
     _ref$nodeType = _ref.nodeType,
@@ -49,16 +50,18 @@ function MediaSingle(_ref) {
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
+  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 (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
-  if (pctWidth) {
-    var pxWidth = Math.ceil((0, _grid.calcPxFromPct)(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil((0, _grid.calcPxFromPct)(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -66,7 +69,7 @@ function MediaSingle(_ref) {
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -102,11 +105,12 @@ function MediaSingle(_ref) {
       width: width,
       layout: layout,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: (0, _classnames.default)('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
       'is-loading': isLoading,

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

@@ -118,8 +118,9 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     isResized = _ref.isResized,
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
+    mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.22.0",
+	"version": "74.23.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.22.0";
+const packageVersion = "74.23.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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.22.0";
+const packageVersion = "74.23.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -23,6 +23,7 @@ export default function MediaSingle({
   containerWidth = width,
   isLoading = false,
   pctWidth,
+  size,
   className,
   children: propsChildren,
   nodeType = 'mediaSingle',
@@ -31,16 +32,18 @@ export default function MediaSingle({
   hasFallbackContainer = true,
   handleMediaSingleRef
 }) {
+  const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
+  let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   const children = React.Children.toArray(propsChildren);
-  if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   const isHeightOnly = width === undefined;
-  if (pctWidth) {
-    const pxWidth = Math.ceil(calcPxFromPct(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    const pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -48,7 +51,7 @@ export default function MediaSingle({
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -82,11 +85,12 @@ export default function MediaSingle({
       width,
       layout,
       containerWidth,
-      pctWidth,
+      mediaSingleWidth,
       fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: classnames('rich-media-item mediaSingleView-content-wrap', `image-${layout}`, className, {
       'is-loading': isLoading,

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

@@ -99,6 +99,7 @@ export const MediaSingleDimensionHelper = ({
   isResized,
   layout,
   pctWidth,
+  mediaSingleWidth,
   width
 }) => css`
   /* For nested rich media items, set max-width to 100% */
@@ -108,7 +109,7 @@ export const MediaSingleDimensionHelper = ({
     max-width: 100%;
   }
 
-  width: ${pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  width: ${mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
   ${layout === 'full-width' && css`
     min-width: 100%;
   `}

package/dist/es2019/ui/MediaSingle/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.22.0",
+	"version": "74.23.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.22.0";
+var packageVersion = "74.23.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/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.22.0";
+var packageVersion = "74.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -26,6 +26,7 @@ export default function MediaSingle(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     pctWidth = _ref.pctWidth,
+    size = _ref.size,
     className = _ref.className,
     propsChildren = _ref.children,
     _ref$nodeType = _ref.nodeType,
@@ -35,16 +36,18 @@ export default function MediaSingle(_ref) {
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
+  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.Children.toArray(propsChildren);
-  if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
-  if (pctWidth) {
-    var pxWidth = Math.ceil(calcPxFromPct(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -52,7 +55,7 @@ export default function MediaSingle(_ref) {
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -88,11 +91,12 @@ export default function MediaSingle(_ref) {
       width: width,
       layout: layout,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: classnames('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
       'is-loading': isLoading,

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

@@ -108,8 +108,9 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     isResized = _ref.isResized,
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
+    mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/esm/ui/MediaSingle/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

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

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
@@ -14,11 +15,18 @@ export interface Props {
     containerWidth?: number;
     isLoading?: boolean;
     className?: string;
+    /**
+     * @private
+     * @deprecated Use {@link Props.size.width} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    size?: MediaSingleSize;
     nodeType?: string;
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export type { MediaSingleWidthType, MediaSingleSize };
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -22,7 +22,13 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     isResized?: boolean;
     layout: MediaSingleLayout;
+    /**
+     * @private
+     * @deprecated Use {@link MediaSingleWrapperProps.mediaSingleWidth} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
 }
@@ -30,7 +36,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types/ui/MediaSingle/types.d.ts

@@ -0,0 +1,12 @@
+export type MediaSingleWidthType = 'pixel' | 'percentage';
+export type MediaSingleSize = {
+    /**
+     * The width attribute from mediaSingle node
+     */
+    width?: number;
+    /**
+     * The widthType attribute from mediaSingle node
+     * @default percentage
+     */
+    widthType?: MediaSingleWidthType;
+};

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

@@ -1,6 +1,6 @@
 export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
-export type { Props as MediaSingleProps } from './MediaSingle';
+export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
@@ -14,11 +15,18 @@ export interface Props {
     containerWidth?: number;
     isLoading?: boolean;
     className?: string;
+    /**
+     * @private
+     * @deprecated Use {@link Props.size.width} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    size?: MediaSingleSize;
     nodeType?: string;
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export type { MediaSingleWidthType, MediaSingleSize };
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types-ts4.5/ui/MediaSingle/styled.d.ts

@@ -22,7 +22,13 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     isResized?: boolean;
     layout: MediaSingleLayout;
+    /**
+     * @private
+     * @deprecated Use {@link MediaSingleWrapperProps.mediaSingleWidth} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
 }
@@ -30,7 +36,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types-ts4.5/ui/MediaSingle/types.d.ts

@@ -0,0 +1,12 @@
+export type MediaSingleWidthType = 'pixel' | 'percentage';
+export type MediaSingleSize = {
+    /**
+     * The width attribute from mediaSingle node
+     */
+    width?: number;
+    /**
+     * The widthType attribute from mediaSingle node
+     * @default percentage
+     */
+    widthType?: MediaSingleWidthType;
+};

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

@@ -1,6 +1,6 @@
 export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
-export type { Props as MediaSingleProps } from './MediaSingle';
+export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.22.0",
+  "version": "74.23.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"