@atlaskit/renderer 108.18.0 → 108.19.0

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

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+
 import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -154,7 +157,7 @@ var MediaSingle = function MediaSingle(props) {
       featureFlags: featureFlags
     });
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
-    return /*#__PURE__*/React.createElement(UIMediaSingle, {
+    return jsx(UIMediaSingle, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
@@ -167,9 +170,9 @@ var MediaSingle = function MediaSingle(props) {
         widthType: widthType
       },
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(Fragment, null, mediaComponent), allowCaptions && caption);
+    }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
+  return jsx(WidthConsumer, null, function (_ref3) {
     var width = _ref3.width;
     // Note: in SSR mode the `window` object is not defined,
     // therefore width here is 0, see:

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

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import { css } from '@emotion/react';
 export var uiMediaSingleBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: all 0.1s linear;\n"])));
 export var uiMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));

package/dist/esm/react/nodes/panel.js

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject, _templateObject2;
 var _excluded = ["backgroundColor", "hasIcon"];
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
@@ -38,7 +39,7 @@ var PanelStyled = function PanelStyled(_ref) {
       }), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -67,7 +68,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -77,19 +78,19 @@ var Panel = function Panel(props) {
       return null;
     }
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
   var icon = getIcon();
   var renderIcon = function renderIcon() {
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -98,7 +99,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor,
     hasIcon: Boolean(icon)
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/esm/react/nodes/table/sticky.js

@@ -3,8 +3,9 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
@@ -37,7 +38,7 @@ export var FixedTableDiv = function FixedTableDiv(props) {
   var attrs = {
     mode: mode
   };
-  return /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+  return jsx("div", _extends({}, attrs, {
     "data-testid": "sticky-table-fixed",
     css: fixedTableCss
   }), props.children);
@@ -73,26 +74,26 @@ export var StickyTable = function StickyTable(_ref) {
     });
   }
   /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: styles
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth,
     rendererAppearance: rendererAppearance
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     ref: innerRef,
     className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/esm/ui/Expand.js

@@ -2,8 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
@@ -25,7 +26,7 @@ var Container = function Container(props) {
       theme: themeProps
     }), paddingBottom);
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -36,7 +37,7 @@ var TitleContainer = function TitleContainer(props) {
       theme: themeProps
     }), "var(--ds-space-100, 8px)", paddingBottom);
   };
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return jsx("button", _extends({
     css: styles
   }, props), props.children);
 };
@@ -49,7 +50,7 @@ var ContentContainer = function ContentContainer(props) {
       theme: themeProps
     }), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -96,18 +97,18 @@ function Expand(_ref) {
   var handleBlur = useCallback(function () {
     return setFocused(false);
   }, []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return jsx(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/React.createElement(ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
       return setExpanded(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: function onClick(e) {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -122,27 +123,27 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, isMobile ? /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, isMobile ? jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  })) : /*#__PURE__*/React.createElement(Tooltip, {
+  })) : jsx(Tooltip, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef,
     testId: 'tooltip'
-  }, /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  }))), /*#__PURE__*/React.createElement("span", {
+  }))), jsx("span", {
     css: titleStyles,
     id: id
-  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), /*#__PURE__*/React.createElement(ContentContainer, {
+  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: "".concat(nodeType, "-content-wrapper")
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
   }), children))));
 }

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

@@ -10,7 +10,9 @@ 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; }
 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, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
@@ -43,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.18.0";
+var packageVersion = "108.19.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -349,19 +351,19 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         if (onComplete) {
           onComplete(stat);
         }
-        var rendererOutput = /*#__PURE__*/React.createElement(RendererContextProvider, {
+        var rendererOutput = jsx(RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
-        }, /*#__PURE__*/React.createElement(ActiveHeaderIdProvider, {
+        }, jsx(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {
+        }, jsx(AnalyticsContext.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
             }
           }
-        }, /*#__PURE__*/React.createElement(SmartCardStorageProvider, null, /*#__PURE__*/React.createElement(ProviderFactoryProvider, {
+        }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
           value: this.providerFactory
-        }, /*#__PURE__*/React.createElement(RendererWrapper, {
+        }, jsx(RendererWrapper, {
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -375,30 +377,30 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView,
           ssr: media === null || media === void 0 ? void 0 : media.ssr
-        }, enableSsrInlineScripts ? /*#__PURE__*/React.createElement(BreakoutSSRInlineScript, null) : null, /*#__PURE__*/React.createElement(RendererActionsInternalUpdater, {
+        }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
         }, result)))))));
-        var rendererResult = truncated ? /*#__PURE__*/React.createElement(TruncatedWrapper, {
+        var rendererResult = truncated ? jsx(TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
         var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.featureFlags) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.rendererRenderTracking) === null || _this$featureFlags2 === void 0 ? void 0 : _this$featureFlags2[ACTION_SUBJECT.RENDERER];
-        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && /*#__PURE__*/React.createElement(RenderTracking, {
+        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
           componentProps: this.props,
           action: ACTION.RE_RENDERED,
           actionSubject: ACTION_SUBJECT.RENDERER,
           handleAnalyticsEvent: this.fireAnalyticsEvent,
           useShallow: rendererRenderTracking.useShallow
         });
-        return /*#__PURE__*/React.createElement(Fragment, null, reRenderTracking, rendererResult);
+        return jsx(Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
         var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
-        return /*#__PURE__*/React.createElement(RendererWrapper, {
+        return jsx(RendererWrapper, {
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
           allowWrapCodeBlock: allowWrapCodeBlock,
@@ -408,7 +410,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
-        }, /*#__PURE__*/React.createElement(UnsupportedBlock, null));
+        }, jsx(UnsupportedBlock, null));
       }
     }
   }, {
@@ -429,7 +431,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
   return Renderer;
 }(PureComponent);
 var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
-  return /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
+  return jsx(FabricEditorAnalyticsContext, {
     data: {
       appearance: getAnalyticsAppearance(props.appearance),
       packageName: packageName,
@@ -437,15 +439,15 @@ var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
       componentName: 'renderer',
       editorSessionId: uuid()
     }
-  }, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
+  }, jsx(WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
       // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      return jsx(ErrorBoundary, {
         component: ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/React.createElement(IntlErrorBoundary, null, /*#__PURE__*/React.createElement(Renderer, _extends({}, props, {
+      }, jsx(IntlErrorBoundary, null, jsx(Renderer, _extends({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
@@ -513,14 +515,14 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
       };
     }
   }, [innerRef, addTelepointer]);
-  return /*#__PURE__*/React.createElement(WidthProvider, {
+  return jsx(WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance
-  }, /*#__PURE__*/React.createElement(BaseTheme, {
+  }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, /*#__PURE__*/React.createElement(EditorMediaClientProvider, {
+  }, jsx(EditorMediaClientProvider, {
     ssr: ssr
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
@@ -557,15 +559,15 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   var localRef = React.useRef(null);
   var innerRef = props.innerRef || localRef;
   if (!allowAnnotations) {
-    return /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+    return jsx(RendererWithAnalytics, _extends({
       innerRef: innerRef
     }, props));
   }
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement(AnnotationsWrapper, {
+  return jsx(RendererActionsContext, null, jsx(AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
     annotationProvider: props.annotationProvider
-  }, /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+  }, jsx(RendererWithAnalytics, _extends({
     innerRef: innerRef
   }, props, {
     featureFlags: props.featureFlags

package/dist/esm/ui/Renderer/truncated-wrapper.js

@@ -7,7 +7,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 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; } }
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
@@ -19,7 +20,7 @@ var FadeOut = function FadeOut(props) {
     height = props.height;
   var top = height - fadeHeight;
   var styles = fadeOutStyles(height, top, backgroundColor);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: styles
   }, children);
 };
@@ -43,7 +44,7 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
         _this$props$backgroun = _this$props.backgroundColor,
         backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
         children = _this$props.children;
-      return /*#__PURE__*/React.createElement(FadeOut, {
+      return jsx(FadeOut, {
         height: height,
         fadeHeight: fadeHeight,
         backgroundColor: backgroundColor

package/dist/esm/ui/SortingIcon.js

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
@@ -92,11 +93,11 @@ var SortingIcon = function SortingIcon(_ref) {
       onKeyDown(event);
     }
   };
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     delay: 0,
     content: content,
     position: "top"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: buttonStyles,
     className: buttonClassName,
     role: "button",
@@ -105,10 +106,10 @@ var SortingIcon = function SortingIcon(_ref) {
     "aria-disabled": !isSortingAllowed,
     onClick: handleClick,
     onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: iconWrapperStyles,
     className: getIconClassName(isSortingAllowed, sortOrdered)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: iconStyles
   }))));
 };

package/dist/esm/ui/annotations/draft/component.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
 import { AnnotationsDraftContext } from '../context';
 import { splitText, calcTextSplitOffset, findTextString } from './text';
@@ -15,7 +16,7 @@ var markStyles = function markStyles(props) {
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("mark", _extends({
+  return jsx("mark", _extends({
     "data-renderer-mark": true
   }, dataAttributes(draftPosition), {
     css: markStyles
@@ -40,12 +41,12 @@ export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
     if (annotateIndex === index) {
-      return /*#__PURE__*/React.createElement(AnnotationDraft, {
+      return jsx(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return jsx(React.Fragment, {
       key: index
     }, value);
   });
@@ -68,27 +69,27 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/React.createElement(AnnotationDraft, {
+    return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
   }
   var textString = findTextString(children);
   if (!textString) {
-    return /*#__PURE__*/React.createElement(Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
   var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, textString);
   var texts = splitText(textString, offsets);
   if (!texts) {
-    return /*#__PURE__*/React.createElement(Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
   var components = applyAnnotationOnText({
     texts: texts,
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, components);
+  return jsx(Fragment, null, components);
 };

package/dist/esm/ui/annotations/element/mark.js

@@ -5,8 +5,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
+/** @jsx jsx */
 import React, { useMemo, useCallback } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 var markStyles = function markStyles(props) {
@@ -49,7 +50,7 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/React.createElement("mark", _extends({
+  return jsx("mark", _extends({
     id: id,
     onClick: onMarkClick
   }, accessibility, overriddenData, {

package/dist/types/react/nodes/index.d.ts

@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
-declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
 declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;

package/dist/types/react/nodes/mediaInline.d.ts

@@ -8,6 +8,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { RendererContext } from '../types';
+import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,8 +33,8 @@ export type MediaInlineProps = {
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps>;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl">>;
+export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
+    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
 };
 export default _default;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
-declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
 declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;

package/dist/types-ts4.5/react/nodes/mediaInline.d.ts

@@ -8,6 +8,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { RendererContext } from '../types';
+import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,8 +33,8 @@ export type MediaInlineProps = {
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps>;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl">>;
+export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
+    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.18.0",
+  "version": "108.19.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -69,6 +69,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.6.0",