@atlaskit/renderer 85.0.0 → 86.0.0

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

@@ -2,50 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMediaContainerWidth = exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactIntlNext = require("react-intl-next");
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mediaCommon = require("@atlaskit/media-common");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactIntlNext = require("react-intl-next");
-
 var _style = require("../../../ui/Renderer/style");
 
-var _styles = require("./styles");
-
-var _mediaCommon = require("@atlaskit/media-common");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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 _useObservedWidth2 = require("../../hooks/use-observed-width");
 
-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; } }
+var _styles = require("./styles");
 
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
@@ -84,144 +62,160 @@ var getMediaContainerWidth = function getMediaContainerWidth(currentContainerWid
 
 exports.getMediaContainerWidth = getMediaContainerWidth;
 
-var MediaSingle = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaSingle, _Component);
+var MediaSingle = function MediaSingle(props) {
+  var _ref$current;
+
+  var rendererAppearance = props.rendererAppearance,
+      featureFlags = props.featureFlags,
+      isInsideOfBlockNode = props.isInsideOfBlockNode,
+      allowDynamicTextSizing = props.allowDynamicTextSizing,
+      layout = props.layout,
+      children = props.children,
+      pctWidth = props.width;
+  var isCaptionsFlaggedOn = (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags);
+
+  var _React$useState = _react.default.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      externalImageDimensions = _React$useState2[0],
+      setExternalImageDimensions = _React$useState2[1];
+
+  var ref = _react.default.useRef(null);
+
+  var onExternalImageLoaded = _react.default.useCallback(function (_ref2) {
+    var width = _ref2.width,
+        height = _ref2.height;
+    setExternalImageDimensions({
+      width: width,
+      height: height
+    });
+  }, []);
 
-  var _super = _createSuper(MediaSingle);
+  var observedWidthFlag = (0, _mediaCommon.getMediaFeatureFlag)('observedWidth', featureFlags);
 
-  function MediaSingle(props) {
-    var _this;
+  var _useObservedWidth = (0, _useObservedWidth2.useObservedWidth)((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement, observedWidthFlag),
+      observedWidth = _useObservedWidth.width;
 
-    (0, _classCallCheck2.default)(this, MediaSingle);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImageLoaded", function (_ref2) {
-      var width = _ref2.width,
-          height = _ref2.height;
+  var media;
 
-      _this.setState({
-        width: width,
-        height: height
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isCaptionsFlaggedOn", (0, _mediaCommon.getMediaFeatureFlag)('captions', _this.props.featureFlags));
-    _this.state = {}; // Need to initialize with empty state.
+  var _React$Children$toArr3 = _react.default.Children.toArray(children),
+      _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
+      node = _React$Children$toArr4[0],
+      caption = _React$Children$toArr4[1];
 
-    return _this;
-  }
+  if (!isMediaElement(node)) {
+    var mediaElement = checkForMediaElement(node.props.children);
+
+    if (!mediaElement) {
+      return node;
+    }
 
-  (0, _createClass2.default)(MediaSingle, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+    media = mediaElement;
+  } else {
+    media = node;
+  }
 
-      var props = this.props;
-      var media;
+  var _media$props = media.props,
+      _media$props$width = _media$props.width,
+      width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
+      _media$props$height = _media$props.height,
+      height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
+      type = _media$props.type;
 
-      var _React$Children$toArr3 = _react.default.Children.toArray(props.children),
-          _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
-          node = _React$Children$toArr4[0],
-          caption = _React$Children$toArr4[1];
+  if (type === 'external') {
+    var stateWidth = externalImageDimensions.width,
+        stateHeight = externalImageDimensions.height;
 
-      if (!isMediaElement(node)) {
-        var mediaElement = checkForMediaElement(node.props.children);
+    if (width === null) {
+      width = stateWidth || DEFAULT_WIDTH;
+    }
 
-        if (!mediaElement) {
-          return node;
-        }
+    if (height === null) {
+      height = stateHeight || DEFAULT_HEIGHT;
+    }
+  }
 
-        media = mediaElement;
+  if (width === null) {
+    width = DEFAULT_WIDTH;
+    height = DEFAULT_HEIGHT;
+  } // TODO: put appearance-based padding into theme instead
+
+
+  var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
+  var isFullWidth = rendererAppearance === 'full-width';
+
+  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
+    var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
+    var breakpoint = mediaBreakpoint || (0, _ui.getBreakpoint)(containerWidth);
+    var maxWidth = containerWidth;
+    var maxHeight = height / width * maxWidth;
+    var cardDimensions = {
+      width: "".concat(maxWidth, "px"),
+      height: "".concat(maxHeight, "px")
+    };
+    var nonFullWidthSize = containerWidth;
+
+    if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
+
+      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
+        nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
+      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
       } else {
-        media = node;
+        nonFullWidthSize = containerWidth - padding;
       }
+    }
 
-      var _media$props = media.props,
-          _media$props$width = _media$props.width,
-          width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
-          _media$props$height = _media$props.height,
-          height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
-          type = _media$props.type;
-
-      if (type === 'external') {
-        var _this$state = this.state,
-            stateWidth = _this$state.width,
-            stateHeight = _this$state.height;
-
-        if (width === null) {
-          width = stateWidth || DEFAULT_WIDTH;
-        }
-
-        if (height === null) {
-          height = stateHeight || DEFAULT_HEIGHT;
-        }
-      }
+    var minWidth = Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding);
+    var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
+    return {
+      cardDimensions: cardDimensions,
+      lineLength: lineLength,
+      containerWidth: containerWidth
+    };
+  };
+
+  var originalDimensions = {
+    height: height,
+    width: width
+  };
+
+  var renderMediaSingle = function renderMediaSingle(renderWidth, mediaBreakpoint) {
+    var _calcDimensions = calcDimensions(renderWidth, mediaBreakpoint),
+        cardDimensions = _calcDimensions.cardDimensions,
+        lineLength = _calcDimensions.lineLength,
+        containerWidth = _calcDimensions.containerWidth;
+
+    var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
+      resizeMode: 'stretchy-fit',
+      cardDimensions: cardDimensions,
+      originalDimensions: originalDimensions,
+      onExternalImageLoaded: onExternalImageLoaded,
+      disableOverlay: true,
+      featureFlags: featureFlags
+    });
 
-      if (width === null) {
-        width = DEFAULT_WIDTH;
-        height = DEFAULT_HEIGHT;
-      } // TODO: put appearance-based padding into theme instead
-
-
-      var _this$props = this.props,
-          rendererAppearance = _this$props.rendererAppearance,
-          featureFlags = _this$props.featureFlags;
-      var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
-      return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
-        var widthConsumerValue = _ref3.width,
-            breakpoint = _ref3.breakpoint;
-        var containerWidth = getMediaContainerWidth(widthConsumerValue, props.layout);
-        var _this2$props = _this2.props,
-            isInsideOfBlockNode = _this2$props.isInsideOfBlockNode,
-            allowDynamicTextSizing = _this2$props.allowDynamicTextSizing;
-        var maxWidth = containerWidth;
-        var maxHeight = height / width * maxWidth;
-        var cardDimensions = {
-          width: "".concat(maxWidth, "px"),
-          height: "".concat(maxHeight, "px")
-        };
-        var isFullWidth = rendererAppearance === 'full-width';
-        var nonFullWidthSize = containerWidth;
-
-        if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-          var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
-
-          if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-            nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
-          } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-            nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
-          } else {
-            nonFullWidthSize = containerWidth - padding;
-          }
-        }
-
-        var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-        var originalDimensions = {
-          height: height,
-          width: width
-        };
-
-        var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
-          resizeMode: 'stretchy-fit',
-          cardDimensions: cardDimensions,
-          originalDimensions: originalDimensions,
-          onExternalImageLoaded: _this2.onExternalImageLoaded,
-          disableOverlay: true,
-          featureFlags: featureFlags
-        });
-
-        return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
-          layout: props.layout,
-          width: width,
-          height: height,
-          lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-          containerWidth: containerWidth,
-          pctWidth: props.width,
-          fullWidthMode: isFullWidth
-        }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), _this2.isCaptionsFlaggedOn && caption);
-      });
-    }
-  }]);
-  return MediaSingle;
-}(_react.Component);
+    return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
+      handleMediaSingleRef: ref,
+      layout: layout,
+      width: width,
+      height: height,
+      lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: isFullWidth
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+  };
+
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width,
+        breakpoint = _ref3.breakpoint;
+    return renderMediaSingle(width, breakpoint);
+  });
+};
 
 var _default = (0, _reactIntlNext.injectIntl)(MediaSingle);
 

package/dist/cjs/react/nodes/mention.js

@@ -47,7 +47,6 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           providers = _this$props.providers,
           text = _this$props.text,
           accessLevel = _this$props.accessLevel;
@@ -56,7 +55,6 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
         text: text,
         accessLevel: accessLevel,
         providers: providers,
-        portal: portal,
         eventHandlers: eventHandlers && eventHandlers.mention
       });
     }

package/dist/cjs/react/nodes/status.js

@@ -57,7 +57,8 @@ var Status = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_element.Status, {
         text: text,
         color: color,
-        localId: localId
+        localId: localId,
+        role: "presentation"
       }));
     }
   }]);

package/dist/cjs/react/nodes/tableCell.js

@@ -39,6 +39,10 @@ var _enums = require("../../analytics/enums");
 
 var _consts = require("../../consts");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../messages");
+
 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; } }
@@ -60,19 +64,23 @@ var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   return _types.SortOrder.NO_ORDER;
 };
 
-var getSortOrderLabel = function getSortOrderLabel(currentSortOrder) {
+var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
+  var noneSortingLabel = _messages.tableCellMessages.noneSortingLabel,
+      ascSortingLabel = _messages.tableCellMessages.ascSortingLabel,
+      descSortingLabel = _messages.tableCellMessages.descSortingLabel;
+
   switch (currentSortOrder) {
     case _types.SortOrder.NO_ORDER:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
 
     case _types.SortOrder.ASC:
-      return 'ascending';
+      return intl.formatMessage(ascSortingLabel);
 
     case _types.SortOrder.DESC:
-      return 'descending';
+      return intl.formatMessage(descSortingLabel);
 
     default:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
   }
 };
 
@@ -148,7 +156,7 @@ var withCellProps = function withCellProps(WrapperComponent) {
 };
 
 var withSortableColumn = function withSortableColumn(WrapperComponent) {
-  return /*#__PURE__*/function (_React$Component2) {
+  var WithSortableColumn = /*#__PURE__*/function (_React$Component2) {
     (0, _inherits2.default)(WithSortableColumn, _React$Component2);
 
     var _super2 = _createSuper(WithSortableColumn);
@@ -219,7 +227,8 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
             onSorting = _this$props3.onSorting,
             children = _this$props3.children,
             sortOrdered = _this$props3.sortOrdered,
-            isHeaderRow = _this$props3.isHeaderRow;
+            isHeaderRow = _this$props3.isHeaderRow,
+            intl = _this$props3.intl;
         var sortOrderedClassName = sortOrdered === _types.SortOrder.NO_ORDER ? _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
 
         if (!allowColumnSorting || !isHeaderRow) {
@@ -234,7 +243,7 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
         return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, this.props, {
           className: className,
-          ariaSort: getSortOrderLabel(sortOrdered)
+          ariaSort: getSortOrderLabel(intl, sortOrdered)
         }), /*#__PURE__*/_react.default.createElement("div", {
           className: _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON,
           role: "button",
@@ -253,6 +262,8 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
     }]);
     return WithSortableColumn;
   }(_react.default.Component);
+
+  return (0, _reactIntlNext.injectIntl)(WithSortableColumn);
 };
 
 exports.withSortableColumn = withSortableColumn;

package/dist/cjs/react/nodes/task-item-with-providers.js

@@ -35,7 +35,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _taskDecision = require("@atlaskit/task-decision");
 
-var _excluded = ["contextIdentifierProvider", "objectAri"];
+var _excluded = ["contextIdentifierProvider", "objectAri", "isRenderer"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -140,10 +140,12 @@ var TaskItemWithProviders = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           contextIdentifierProvider = _this$props.contextIdentifierProvider,
           objectAri = _this$props.objectAri,
+          isRenderer = _this$props.isRenderer,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
       return /*#__PURE__*/_react.default.createElement(_taskDecision.ResourcedTaskItem, (0, _extends2.default)({}, otherProps, {
-        objectAri: resolvedObjectId
+        objectAri: resolvedObjectId,
+        isRenderer: isRenderer
       }));
     }
   }]);

package/dist/cjs/react/nodes/taskItem.js

@@ -73,6 +73,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
+        isRenderer: true,
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,

package/dist/cjs/render-document.js

@@ -17,6 +17,8 @@ var _events = require("./analytics/events");
 
 var _unsupportedContent = require("./analytics/unsupported-content");
 
+var _adfUtils = require("@atlaskit/adf-utils");
+
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 var withStopwatch = function withStopwatch(cb) {
@@ -44,7 +46,21 @@ var renderDocument = function renderDocument(doc, serializer) {
 
   var _withStopwatch = withStopwatch(function () {
     if (useSpecBasedValidator) {
-      return (0, _utils.validateADFEntity)(schema, doc, dispatchAnalyticsEvent);
+      // link mark on mediaSingle is deprecated, need to move link mark to child media node
+      // https://product-fabric.atlassian.net/browse/ED-14043
+      var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
+          transformedAdf = _transformMediaLinkMa.transformedAdf,
+          isTransformed = _transformMediaLinkMa.isTransformed;
+
+      if (isTransformed && dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          eventType: _enums.EVENT_TYPE.OPERATIONAL
+        });
+      }
+
+      return (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
     }
 
     return (0, _validator.getValidDocument)(doc, schema, adfStage);

package/dist/cjs/types/smartLinksOptions.js

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

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -48,13 +48,16 @@ var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.string
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
-  function findUp(element, selector) {
+  var MEDIA_NODE_TYPE = 'mediaSingle';
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+
+  function findUp(element, condition) {
     if (!element) {
       return;
     }
 
     while (element.parentElement) {
-      if (element.parentElement.classList.contains(selector)) {
+      if (condition(element)) {
         return element.parentElement;
       }
 
@@ -62,7 +65,11 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
     }
   }
 
-  var renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), 'ak-renderer-wrapper');
+  var renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), function (elem) {
+    var _elem$parentElement;
+
+    return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
+  });
 
   if (!renderer) {
     return;
@@ -79,7 +86,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
 
-          if (!mode || !['full-width', 'wide'].includes(mode)) {
+          if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
 
@@ -102,9 +109,45 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
+       * Thus adding this conditional to deal with all meida elements directly.
+       */
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        applyMediaBreakout(item.target);
       }
     });
   });
+
+  var applyMediaBreakout = function applyMediaBreakout(card) {
+    // width was already set by another breakout script
+    if (card.style.width) {
+      return;
+    }
+
+    var tableParent = findUp(card, function (elem) {
+      return elem instanceof HTMLTableCellElement;
+    }); // only apply the breakout to media elements not nested inside table
+    // table sizing is not based on percentage width
+
+    if (tableParent) {
+      return;
+    }
+
+    var mode = card.dataset.mode || card.dataset.layout || '';
+    var width = card.dataset.width;
+
+    if (WIDE_LAYOUT_MODES.includes(mode)) {
+      card.style.width = '100%';
+    } else if (width) {
+      card.style.width = "".concat(width, "%");
+    }
+  };
+
   observer.observe(renderer, {
     childList: true,
     subtree: true

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

@@ -259,6 +259,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowMediaLinking: props.media && props.media.allowLinking,
         surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
         media: props.media,
+        smartLinks: props.smartLinks,
         allowCopyToClipboard: props.allowCopyToClipboard,
         allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,