@atlaskit/editor-common 78.10.1 → 78.11.0

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

@@ -21,7 +21,8 @@ export default function MediaSingle({
   fullWidthMode,
   lineLength: editorWidth,
   hasFallbackContainer = true,
-  handleMediaSingleRef
+  handleMediaSingleRef,
+  isInsideOfInlineExtension = false
 }) {
   const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
@@ -79,7 +80,8 @@ export default function MediaSingle({
       containerWidth,
       mediaSingleWidth,
       fullWidthMode,
-      isExtendedResizeExperienceOn: isPixelWidth
+      isExtendedResizeExperienceOn: isPixelWidth,
+      isInsideOfInlineExtension
     }),
     "data-layout": layout,
     "data-width": mediaSingleWidth,

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

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -15,11 +15,17 @@ function float(layout) {
       return 'none';
   }
 }
-function getWidthIfFullWidthMode(width) {
-  return width > akEditorFullWidthLayoutWidth ? '100%' : `${width}px`;
+function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullWidthLayoutWidth ? `${Math.min(containerWidth, akEditorFullWidthLayoutWidth)}px` : `${originalWidth}px`;
+  }
+  return originalWidth > akEditorFullWidthLayoutWidth ? '100%' : `${originalWidth}px`;
 }
-function getWidthIfDefaultMode(width) {
-  return width > akEditorFullPageMaxWidth ? '100%' : `${width}px`;
+function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullPageMaxWidth ? `${Math.min(containerWidth, akEditorDefaultLayoutWidth)}px` : `${originalWidth}px`;
+  }
+  return originalWidth > akEditorFullPageMaxWidth ? '100%' : `${originalWidth}px`;
 }
 
 /**
@@ -29,7 +35,7 @@ function getWidthIfDefaultMode(width) {
  * then an image in wide or full-width can not be wider than the image's
  * original width.
  */
-export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode, isResized) {
+export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode, isResized, isInsideOfInlineExtension) {
   switch (layout) {
     case 'align-start':
     case 'align-end':
@@ -37,11 +43,34 @@ export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : `${width}px`;
     case 'wide':
-      return calcWideWidth(containerWidth);
+      return isInsideOfInlineExtension ? calcWideWidth(containerWidth, Infinity, `${containerWidth}px`) : calcWideWidth(containerWidth);
+    case 'full-width':
+      return calcBreakoutWidth(layout, containerWidth);
+    default:
+      return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
+  }
+}
+
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+export function calcLegacyWidthForInline(layout, width, containerWidth = 0, fullWidthMode, isResized) {
+  switch (layout) {
+    case 'align-start':
+    case 'align-end':
+    case 'wrap-right':
+    case 'wrap-left':
+      return width > containerWidth / 2 ? 'calc(50% - 12px)' : `${width}px`;
+    case 'wide':
+      return calcWideWidth(containerWidth, Infinity, `${containerWidth}px`);
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
     default:
-      return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
+      return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
 
@@ -104,7 +133,8 @@ export const MediaSingleDimensionHelper = ({
   width,
   // original media width
   isExtendedResizeExperienceOn,
-  isNestedNode = false
+  isNestedNode = false,
+  isInsideOfInlineExtension = false
 }) => css`
   /* For nested rich media items, set max-width to 100% */
   tr &,
@@ -115,7 +145,7 @@ export const MediaSingleDimensionHelper = ({
     max-width: 100%;
   }
 
-  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension)};
   ${layout === 'full-width' &&
 /* This causes issues for new experience where we don't strip layout attributes
  when copying top-level node and pasting into a table/layout,

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

@@ -6,9 +6,8 @@ import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
 
 // Wraps the navigation bar and extensionFrames
 const mbeExtensionContainer = css({
-  background: 'transpaent !important',
+  background: 'transparent !important',
   'padding:': {
-    bottom: `${"var(--ds-space-100, 8px)"} !important`,
     left: `${"var(--ds-space-100, 8px)"} !important`,
     right: `${"var(--ds-space-100, 8px)"} !important`
   },
@@ -60,12 +59,6 @@ const extensionFrameContent = css({
   },
   '.extensionView-content-wrap': {
     marginTop: `${"var(--ds-space-100, 8px)"} !important`
-  },
-  '.decisionItemView-content-wrap': {
-    marginTop: '0px !important'
-  },
-  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
-    marginTop: '0px !important'
   }
 });
 export const sharedMultiBodiedExtensionStyles = {

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

@@ -1,6 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -26,38 +25,33 @@ const {
   Provider,
   Consumer
 } = WidthContext;
-export class WidthProvider extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      width: 0
-    });
-    _defineProperty(this, "setWidth", rafSchedule(width => {
-      // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
-      if (Math.abs(this.state.width - width) < SCROLLBAR_WIDTH) {
-        return;
-      }
-      this.setState({
-        width
-      });
-    }));
-    if (typeof document !== 'undefined') {
-      this.state.width = document.body.offsetWidth;
+export const WidthProvider = ({
+  className,
+  shouldCheckExistingValue,
+  children
+}) => {
+  const existingContextValue = React.useContext(WidthContext);
+  const [width, setWidth] = React.useState(typeof document !== 'undefined' ? document.body.offsetWidth : 0);
+  const providerValue = React.useMemo(() => createWidthContext(width), [width]);
+  const updateWidth = rafSchedule(nextWidth => {
+    // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
+    if (Math.abs(width - nextWidth) < SCROLLBAR_WIDTH) {
+      return;
     }
-  }
-  render() {
-    return jsx("div", {
-      css: css`
-          position: relative;
-          width: 100%;
-        `,
-      className: this.props.className
-    }, jsx(WidthObserver, {
-      setWidth: this.setWidth,
-      offscreen: true
-    }), jsx(Provider, {
-      value: createWidthContext(this.state.width)
-    }, this.props.children));
-  }
-}
+    setWidth(nextWidth);
+  });
+  const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
+  return jsx("div", {
+    css: css`
+        position: relative;
+        width: 100%;
+      `,
+    className: className
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
+};
 export { Consumer as WidthConsumer };

package/dist/es2019/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';

package/dist/esm/extensibility/Extension/InlineExtension/index.js

@@ -1,50 +1,45 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useSharedPluginState } from '../../../hooks';
+import { createWidthContext, WidthContext } from '../../../ui';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
-import { wrapperStyle } from './styles';
-var InlineExtension = /*#__PURE__*/function (_Component) {
-  _inherits(InlineExtension, _Component);
-  var _super = _createSuper(InlineExtension);
-  function InlineExtension() {
-    _classCallCheck(this, InlineExtension);
-    return _super.apply(this, arguments);
+import { inlineWrapperStyels, wrapperStyle } from './styles';
+var InlineExtension = function InlineExtension(props) {
+  var node = props.node,
+    pluginInjectionApi = props.pluginInjectionApi,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected,
+    children = props.children;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var hasChildren = !!children;
+  var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
+  var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
+  var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
+    css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
+    className: "extension-container inline ".concat(className)
+  }, jsx("div", {
+    css: overlay,
+    className: "extension-overlay"
+  }), children ? children : jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  })));
+  if (extendedInlineExtension) {
+    return jsx(WidthContext.Provider, {
+      value: createWidthContext(rendererContainerWidth)
+    }, inlineExtensionInternal);
   }
-  _createClass(InlineExtension, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        node = _this$props.node,
-        children = _this$props.children,
-        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
-        isNodeSelected = _this$props.isNodeSelected;
-      var hasChildren = !!children;
-      var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-      return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      }), jsx("div", {
-        css: wrapperStyle,
-        className: "extension-container inline ".concat(className)
-      }, jsx("div", {
-        css: overlay,
-        className: "extension-overlay"
-      }), children ? children : jsx(ExtensionLozenge, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      })));
-    }
-  }]);
-  return InlineExtension;
-}(Component);
-export { InlineExtension as default };
+  return inlineExtensionInternal;
+};
+export default InlineExtension;

package/dist/esm/extensibility/Extension/InlineExtension/styles.js

@@ -1,5 +1,33 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../styles';
-export var wrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", ";\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");
+export var wrapperStyle = css(wrapperDefault, {
+  cursor: 'pointer',
+  display: 'inline-flex',
+  margin: "1px 1px ".concat("var(--ds-space-050, 4px)"),
+  '> img': {
+    borderRadius: "var(--ds-border-radius, 3px)"
+  },
+  '&::after, &::before': {
+    verticalAlign: 'text-top',
+    display: 'inline-block',
+    width: '1px',
+    content: "''"
+  },
+  '&.with-children': {
+    padding: 0,
+    background: "var(--ds-background-neutral-subtle, white)"
+  }
+});
+export var inlineWrapperStyels = css({
+  maxWidth: '100%',
+  display: 'inline-block',
+  '&::after, &::before': {
+    display: 'block'
+  },
+  'tr &': {
+    maxWidth: 'inherit'
+  },
+  '.rich-media-item': {
+    maxWidth: '100%'
+  }
+});

package/dist/esm/extensibility/ExtensionComponent.js

@@ -223,7 +223,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            pluginInjectionApi: pluginInjectionApi
           }, extensionHandlerResult);
         default:
           return null;

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 = "78.10.1";
+var packageVersion = "78.11.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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.10.1";
+var packageVersion = "78.11.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -26,7 +26,9 @@ export default function MediaSingle(_ref) {
     editorWidth = _ref.lineLength,
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
-    handleMediaSingleRef = _ref.handleMediaSingleRef;
+    handleMediaSingleRef = _ref.handleMediaSingleRef,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
   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);
@@ -85,7 +87,8 @@ export default function MediaSingle(_ref) {
       containerWidth: containerWidth,
       mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode,
-      isExtendedResizeExperienceOn: isPixelWidth
+      isExtendedResizeExperienceOn: isPixelWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }),
     "data-layout": layout,
     "data-width": mediaSingleWidth,

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

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -19,11 +19,17 @@ function float(layout) {
       return 'none';
   }
 }
-function getWidthIfFullWidthMode(width) {
-  return width > akEditorFullWidthLayoutWidth ? '100%' : "".concat(width, "px");
+function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullWidthLayoutWidth ? "".concat(Math.min(containerWidth, akEditorFullWidthLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > akEditorFullWidthLayoutWidth ? '100%' : "".concat(originalWidth, "px");
 }
-function getWidthIfDefaultMode(width) {
-  return width > akEditorFullPageMaxWidth ? '100%' : "".concat(width, "px");
+function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullPageMaxWidth ? "".concat(Math.min(containerWidth, akEditorDefaultLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > akEditorFullPageMaxWidth ? '100%' : "".concat(originalWidth, "px");
 }
 
 /**
@@ -37,6 +43,7 @@ export function calcLegacyWidth(layout, width) {
   var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
   var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  var isInsideOfInlineExtension = arguments.length > 5 ? arguments[5] : undefined;
   switch (layout) {
     case 'align-start':
     case 'align-end':
@@ -44,11 +51,37 @@ export function calcLegacyWidth(layout, width) {
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
     case 'wide':
-      return calcWideWidth(containerWidth);
+      return isInsideOfInlineExtension ? calcWideWidth(containerWidth, Infinity, "".concat(containerWidth, "px")) : calcWideWidth(containerWidth);
+    case 'full-width':
+      return calcBreakoutWidth(layout, containerWidth);
+    default:
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
+  }
+}
+
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+export function calcLegacyWidthForInline(layout, width) {
+  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
+  var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  switch (layout) {
+    case 'align-start':
+    case 'align-end':
+    case 'wrap-right':
+    case 'wrap-left':
+      return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
+    case 'wide':
+      return calcWideWidth(containerWidth, Infinity, "".concat(containerWidth, "px"));
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
     default:
-      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
 
@@ -113,8 +146,10 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     width = _ref.width,
     isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
     _ref$isNestedNode = _ref.isNestedNode,
-    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
-  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  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
+  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  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension), layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */

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

@@ -6,9 +6,8 @@ import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
 
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = css({
-  background: 'transpaent !important',
+  background: 'transparent !important',
   'padding:': {
-    bottom: "var(--ds-space-100, 8px)".concat(" !important"),
     left: "var(--ds-space-100, 8px)".concat(" !important"),
     right: "var(--ds-space-100, 8px)".concat(" !important")
   },
@@ -60,12 +59,6 @@ var extensionFrameContent = css({
   },
   '.extensionView-content-wrap': {
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
-  },
-  '.decisionItemView-content-wrap': {
-    marginTop: '0px !important'
-  },
-  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
-    marginTop: '0px !important'
   }
 });
 export var sharedMultiBodiedExtensionStyles = {

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

@@ -1,16 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject;
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -36,44 +28,34 @@ export function createWidthContext() {
 export var WidthContext = /*#__PURE__*/React.createContext(createWidthContext());
 var Provider = WidthContext.Provider,
   Consumer = WidthContext.Consumer;
-export var WidthProvider = /*#__PURE__*/function (_React$Component) {
-  _inherits(WidthProvider, _React$Component);
-  var _super = _createSuper(WidthProvider);
-  function WidthProvider(props) {
-    var _this;
-    _classCallCheck(this, WidthProvider);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      width: 0
-    });
-    _defineProperty(_assertThisInitialized(_this), "setWidth", rafSchedule(function (width) {
-      // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
-      if (Math.abs(_this.state.width - width) < SCROLLBAR_WIDTH) {
-        return;
-      }
-      _this.setState({
-        width: width
-      });
-    }));
-    if (typeof document !== 'undefined') {
-      _this.state.width = document.body.offsetWidth;
+export var WidthProvider = function WidthProvider(_ref) {
+  var className = _ref.className,
+    shouldCheckExistingValue = _ref.shouldCheckExistingValue,
+    children = _ref.children;
+  var existingContextValue = React.useContext(WidthContext);
+  var _React$useState = React.useState(typeof document !== 'undefined' ? document.body.offsetWidth : 0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var providerValue = React.useMemo(function () {
+    return createWidthContext(width);
+  }, [width]);
+  var updateWidth = rafSchedule(function (nextWidth) {
+    // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
+    if (Math.abs(width - nextWidth) < SCROLLBAR_WIDTH) {
+      return;
     }
-    return _this;
-  }
-  _createClass(WidthProvider, [{
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n        "]))),
-        className: this.props.className
-      }, jsx(WidthObserver, {
-        setWidth: this.setWidth,
-        offscreen: true
-      }), jsx(Provider, {
-        value: createWidthContext(this.state.width)
-      }, this.props.children));
-    }
-  }]);
-  return WidthProvider;
-}(React.Component);
+    setWidth(nextWidth);
+  });
+  var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
+  return jsx("div", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        width: 100%;\n      "]))),
+    className: className
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
+};
 export { Consumer as WidthConsumer };

package/dist/esm/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';