@atlaskit/renderer 108.15.3 → 108.15.5

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -46,7 +46,19 @@ var checkForMediaElement = function checkForMediaElement(children) {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 var getMediaContainerWidth = function getMediaContainerWidth(currentContainerWidth, layout) {
-  return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? _editorSharedStyles.akEditorDefaultLayoutWidth : currentContainerWidth;
+  if (currentContainerWidth) {
+    return currentContainerWidth;
+  }
+
+  // SSR mode fallback to default layout width
+  switch (layout) {
+    case 'full-width':
+      return _editorSharedStyles.akEditorFullWidthLayoutWidth;
+    case 'wide':
+      return _editorSharedStyles.akEditorWideLayoutWidth;
+    default:
+      return _editorSharedStyles.akEditorDefaultLayoutWidth;
+  }
 };
 exports.getMediaContainerWidth = getMediaContainerWidth;
 var MediaSingle = function MediaSingle(props) {
@@ -116,7 +128,7 @@ var MediaSingle = function MediaSingle(props) {
 
   var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
   var isFullWidth = rendererAppearance === 'full-width';
-  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
+  var calcDimensions = function calcDimensions(mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
@@ -145,8 +157,8 @@ var MediaSingle = function MediaSingle(props) {
     height: height,
     width: width
   };
-  var renderMediaSingle = function renderMediaSingle(renderWidth, mediaBreakpoint) {
-    var _calcDimensions = calcDimensions(renderWidth, mediaBreakpoint),
+  var renderMediaSingle = function renderMediaSingle(renderWidth) {
+    var _calcDimensions = calcDimensions(renderWidth),
       cardDimensions = _calcDimensions.cardDimensions,
       lineLength = _calcDimensions.lineLength,
       containerWidth = _calcDimensions.containerWidth;
@@ -175,9 +187,11 @@ var MediaSingle = function MediaSingle(props) {
     }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), showCaptions && caption);
   };
   return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
-    var width = _ref3.width,
-      breakpoint = _ref3.breakpoint;
-    return renderMediaSingle(width, breakpoint);
+    var width = _ref3.width;
+    // Note: in SSR mode the `window` object is not defined,
+    // therefore width here is 0, see:
+    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+    return renderMediaSingle(width);
   });
 };
 var _default = (0, _reactIntlNext.injectIntl)(MediaSingle);

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.3";
+var packageVersion = "108.15.5";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
-import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 const DEFAULT_WIDTH = 250;
@@ -34,7 +34,19 @@ const checkForMediaElement = children => {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 export const getMediaContainerWidth = (currentContainerWidth, layout) => {
-  return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? akEditorDefaultLayoutWidth : currentContainerWidth;
+  if (currentContainerWidth) {
+    return currentContainerWidth;
+  }
+
+  // SSR mode fallback to default layout width
+  switch (layout) {
+    case 'full-width':
+      return akEditorFullWidthLayoutWidth;
+    case 'wide':
+      return akEditorWideLayoutWidth;
+    default:
+      return akEditorDefaultLayoutWidth;
+  }
 };
 const MediaSingle = props => {
   const {
@@ -100,7 +112,7 @@ const MediaSingle = props => {
 
   const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
   const isFullWidth = rendererAppearance === 'full-width';
-  const calcDimensions = (mediaContainerWidth, mediaBreakpoint) => {
+  const calcDimensions = mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     const maxWidth = containerWidth;
     const maxHeight = height / width * maxWidth;
@@ -129,12 +141,12 @@ const MediaSingle = props => {
     height,
     width
   };
-  const renderMediaSingle = (renderWidth, mediaBreakpoint) => {
+  const renderMediaSingle = renderWidth => {
     const {
       cardDimensions,
       lineLength,
       containerWidth
-    } = calcDimensions(renderWidth, mediaBreakpoint);
+    } = calcDimensions(renderWidth);
     const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions,
@@ -160,10 +172,12 @@ const MediaSingle = props => {
     }, jsx(Fragment, null, mediaComponent), showCaptions && caption);
   };
   return jsx(WidthConsumer, null, ({
-    width,
-    breakpoint
+    width
   }) => {
-    return renderMediaSingle(width, breakpoint);
+    // Note: in SSR mode the `window` object is not defined,
+    // therefore width here is 0, see:
+    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+    return renderMediaSingle(width);
   });
 };
 export default injectIntl(MediaSingle);

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.15.3";
+const packageVersion = "108.15.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -6,7 +6,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
-import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 var DEFAULT_WIDTH = 250;
@@ -36,7 +36,19 @@ var checkForMediaElement = function checkForMediaElement(children) {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 export var getMediaContainerWidth = function getMediaContainerWidth(currentContainerWidth, layout) {
-  return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? akEditorDefaultLayoutWidth : currentContainerWidth;
+  if (currentContainerWidth) {
+    return currentContainerWidth;
+  }
+
+  // SSR mode fallback to default layout width
+  switch (layout) {
+    case 'full-width':
+      return akEditorFullWidthLayoutWidth;
+    case 'wide':
+      return akEditorWideLayoutWidth;
+    default:
+      return akEditorDefaultLayoutWidth;
+  }
 };
 var MediaSingle = function MediaSingle(props) {
   var rendererAppearance = props.rendererAppearance,
@@ -105,7 +117,7 @@ var MediaSingle = function MediaSingle(props) {
 
   var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
   var isFullWidth = rendererAppearance === 'full-width';
-  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
+  var calcDimensions = function calcDimensions(mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
@@ -134,8 +146,8 @@ var MediaSingle = function MediaSingle(props) {
     height: height,
     width: width
   };
-  var renderMediaSingle = function renderMediaSingle(renderWidth, mediaBreakpoint) {
-    var _calcDimensions = calcDimensions(renderWidth, mediaBreakpoint),
+  var renderMediaSingle = function renderMediaSingle(renderWidth) {
+    var _calcDimensions = calcDimensions(renderWidth),
       cardDimensions = _calcDimensions.cardDimensions,
       lineLength = _calcDimensions.lineLength,
       containerWidth = _calcDimensions.containerWidth;
@@ -164,9 +176,11 @@ var MediaSingle = function MediaSingle(props) {
     }, jsx(Fragment, null, mediaComponent), showCaptions && caption);
   };
   return jsx(WidthConsumer, null, function (_ref3) {
-    var width = _ref3.width,
-      breakpoint = _ref3.breakpoint;
-    return renderMediaSingle(width, breakpoint);
+    var width = _ref3.width;
+    // Note: in SSR mode the `window` object is not defined,
+    // therefore width here is 0, see:
+    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+    return renderMediaSingle(width);
   });
 };
 export default injectIntl(MediaSingle);

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.3";
+var packageVersion = "108.15.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.15.3",
+  "version": "108.15.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^75.8.0",
+    "@atlaskit/editor-common": "^76.1.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",