@atlaskit/renderer 91.0.0 → 93.0.0

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

@@ -3,21 +3,28 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
 import { AnnotationsDraftContext } from '../context';
 import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
-import styled from 'styled-components';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-var DraftAnnotation = styled.mark(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), AnnotationSharedCSSByState.focus);
+
+var markStyles = function markStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
+};
+
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(DraftAnnotation, _extends({
+  return jsx("mark", _extends({
     "data-renderer-mark": true
-  }, dataAttributes(draftPosition)), children);
+  }, dataAttributes(draftPosition), {
+    css: markStyles
+  }), children);
 };
 export var getAnnotationIndex = function getAnnotationIndex(annotationPosition, fragmentCount) {
   if (annotationPosition === InsertDraftPosition.START) {
@@ -41,13 +48,13 @@ 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);
   });
@@ -72,11 +79,11 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(React.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);
@@ -86,7 +93,7 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({
@@ -94,5 +101,5 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, components);
+  return jsx(Fragment, null, components);
 };

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

@@ -9,11 +9,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/** @jsx jsx */
 import React, { useMemo, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-import styled from 'styled-components';
-var MarkStyled = styled.mark(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState.blur, AnnotationSharedCSSByState.focus);
+
+var markStyles = function markStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState(props).blur, AnnotationSharedCSSByState(props).focus);
+};
+
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
       children = _ref.children,
@@ -47,8 +52,10 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/React.createElement(MarkStyled, _extends({
+  return jsx("mark", _extends({
     id: id,
     onClick: onMarkClick
-  }, accessibility, overriddenData), children);
+  }, accessibility, overriddenData, {
+    css: markStyles
+  }), children);
 };

package/dist/esm/ui/renderer-props.js

@@ -1 +1 @@
-export {};
+import { ACTION_SUBJECT } from '../analytics/enums';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "91.0.0",
+	"version": "93.0.0",
 	"sideEffects": false
 }

package/dist/types/analytics/enums.d.ts

@@ -7,6 +7,8 @@ export declare enum EVENT_TYPE {
 export declare enum ACTION {
     STARTED = "started",
     RENDERED = "rendered",
+    RE_RENDERED = "reRendered",
+    RENDERER_TTI = "tti",
     CRASHED = "unhandledErrorCaught",
     INVALID_PROSEMIRROR_DOCUMENT = "invalidProsemirrorDocument",
     SELECT_ALL_CAUGHT = "selectAllCaught",

package/dist/types/analytics/events.d.ts

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, AEP, EVENT_TYPE, ACTION_SUBJECT_ID } from './enums';
-import { SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY } from '@atlaskit/editor-common/utils';
+import { PropsDifference, SEVERITY, ShallowPropsDifference, UNSUPPORTED_CONTENT_LEVEL_SEVERITY } from '@atlaskit/editor-common/utils';
 import type { UnsupportedContentPayload } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/src/utils/analytics';
@@ -22,6 +22,11 @@ declare type RendererRenderedAEP = AEP<ACTION.RENDERED, ACTION_SUBJECT.RENDERER,
     nodes: Record<string, number>;
     severity?: SEVERITY;
 }, EVENT_TYPE.OPERATIONAL>;
+declare type RendererReRenderedAEP<Props> = AEP<ACTION.RE_RENDERED, ACTION_SUBJECT.RENDERER, undefined, {
+    propsDifference: PropsDifference<Props> | ShallowPropsDifference<Props>;
+    count: number;
+    componentId?: string;
+}, EVENT_TYPE.OPERATIONAL>;
 export declare type ComponentCrashErrorAEP = AEP<ACTION.CRASHED, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
     platform: PLATFORM.WEB;
     errorMessage?: string;
@@ -97,5 +102,10 @@ export declare enum RESOLVE_METHOD {
 }
 export declare type AnnotationAEP = AEP<AnnotationActionType, ACTION_SUBJECT.ANNOTATION, ACTION_SUBJECT_ID.INLINE_COMMENT, AnnotationAEPAttributes, undefined>;
 declare type MediaLnkTransformedAEP = AEP<ACTION.MEDIA_LINK_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined, EVENT_TYPE.OPERATIONAL>;
-export declare type AnalyticsEventPayload = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP;
+declare type RendererTTIAEP = AEP<ACTION.RENDERER_TTI, ACTION_SUBJECT.RENDERER, undefined, {
+    tti: number;
+    ttiFromInvocation: number;
+    canceled: boolean;
+}, EVENT_TYPE.OPERATIONAL>;
+export declare type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | RendererReRenderedAEP<T> | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | RendererTTIAEP;
 export {};

package/dist/types/react/marks/alignment.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { AlignmentAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
-export default function Alignment(props: MarkProps<AlignmentAttributes>): JSX.Element;
+export default function Alignment(props: MarkProps<AlignmentAttributes>): jsx.JSX.Element;

package/dist/types/react/marks/breakout.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
-export declare const Wrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): JSX.Element;
+export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
+export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

package/dist/types/react/marks/link.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { LinkAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 interface LinkProps extends LinkAttributes {
     target?: string;
     isMediaLink?: boolean;
 }
-export default function Link(props: MarkProps<LinkProps>): JSX.Element;
+export default function Link(props: MarkProps<LinkProps>): jsx.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 import { SupportedLanguages } from '@atlaskit/code';
 export interface Props {
@@ -8,17 +8,7 @@ export interface Props {
     codeBidiWarningTooltipEnabled: boolean;
     className?: string;
 }
-declare const _default: import("styled-components").StyledComponentClass<(Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
-    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
-    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
-    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & import("@atlaskit/theme").NoThemeProps), any, (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").NoThemeProps)>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+};
 export default _default;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import { RichMediaLayout } from '@atlaskit/adf-schema';
 import { RendererAppearance } from '../../ui/Renderer/types';
@@ -14,4 +15,4 @@ export default function EmbedCard(props: {
     rendererAppearance?: RendererAppearance;
     isInsideOfBlockNode?: boolean;
     allowDynamicTextSizing?: boolean;
-}): JSX.Element;
+}): jsx.JSX.Element;

package/dist/types/react/nodes/heading-anchor.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 export declare const HeadingAnchorWrapperClassName = "heading-anchor-wrapper";

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

@@ -9,5 +9,6 @@ declare function Heading(props: NodeProps<{
     showAnchorLink?: boolean;
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     marks?: PMNode['marks'];
+    invisible?: boolean;
 }>): JSX.Element;
 export default Heading;

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

@@ -21,19 +21,7 @@ import Table from './table';
 import { TableCell } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-declare const CodeBlock: (React.ComponentClass<import("styled-components").ThemedOuterStyledProps<(Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").NoThemeProps), any>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("styled-components").ThemedOuterStyledProps<(Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled" | "forwardedRef"> & {
-    theme?: any;
-} & import("@atlaskit/theme").NoThemeProps), any>> & Loadable.LoadableComponent);
+declare const CodeBlock: (React.ComponentClass<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent);
 declare const TaskList: (React.ComponentClass<import("./taskList").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./taskList").Props> & Loadable.LoadableComponent);
 declare const TaskItem: (React.ComponentClass<import("../types").NodeProps<import("./taskItem").Props>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent);
 declare const DecisionList: (React.ComponentClass<import("./decisionList").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./decisionList").Props> & Loadable.LoadableComponent);

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

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 export default function LayoutSection(props: {
     width?: number;
-} & React.Props<any>): JSX.Element;
+} & React.Props<any>): jsx.JSX.Element;

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

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { MediaCardProps } from '../../ui/MediaCard';
@@ -22,5 +24,5 @@ export declare type MediaProps = MediaCardProps & {
 export default class Media extends PureComponent<MediaProps, {}> {
     private renderCard;
     private handleMediaLinkClick;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { default as React } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';

package/dist/types/react/nodes/mediaSingle/styles.d.ts

@@ -1,3 +1,2 @@
-export declare const ExtendedUIMediaSingle: import("styled-components").StyledComponentClass<import("@atlaskit/editor-common/ui").MediaSingleProps, any, Pick<import("@atlaskit/editor-common/ui").MediaSingleProps, "children" | "layout" | "width" | "height" | "className" | "containerWidth" | "isLoading" | "nodeType" | "lineLength" | "pctWidth" | "fullWidthMode" | "hasFallbackContainer" | "handleMediaSingleRef"> & {
-    theme?: any;
-}>;
+export declare const uiMediaSingleBaseStyles: import("@emotion/react").SerializedStyles;
+export declare const uiMediaSingleLayoutStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
@@ -11,5 +13,5 @@ export interface Props {
     panelIconText?: string;
     panelColor?: string;
 }
-declare const Panel: (props: Props) => JSX.Element;
+declare const Panel: (props: Props) => jsx.JSX.Element;
 export default Panel;

package/dist/types/react/nodes/table/sticky.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { TableLayout } from '@atlaskit/adf-schema';
 export declare type StickyMode = 'none' | 'stick' | 'pin-bottom';
@@ -8,7 +10,7 @@ interface FixedProps {
     wrapperWidth: number;
     mode: StickyMode;
 }
-export declare const FixedTableDiv: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & FixedProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & FixedProps>;
+export declare const FixedTableDiv: React.FC<FixedProps>;
 export declare type StickyTableProps = {
     left?: number;
     top?: number;
@@ -24,7 +26,7 @@ export declare type StickyTableProps = {
     renderWidth: number;
     allowDynamicTextSizing?: boolean;
 } & OverflowShadowProps;
-export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, allowDynamicTextSizing, rowHeight, }: StickyTableProps) => JSX.Element;
+export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, allowDynamicTextSizing, rowHeight, }: StickyTableProps) => jsx.JSX.Element;
 export declare class OverflowParent {
     private ref;
     private constructor();

package/dist/types/react/utils/inject-props.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/**
+ * Helper function to recursively injects props to
+ * all valid children react nodes.
+ */
+export declare function recursivelyInjectProps(children: ReactNode[], propsToInject: Object): ReactNode[];

package/dist/types/react/utils/performance/RenderTracking.d.ts

@@ -0,0 +1,15 @@
+import type { AnalyticsEventPayload } from '../../../analytics/events';
+import { ACTION_SUBJECT, ACTION } from '../../../analytics/enums';
+export declare type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
+declare type RenderActions = ACTION.RE_RENDERED;
+declare type RenderActionSubjects = ACTION_SUBJECT.RENDERER;
+export declare type RenderTrackingProps<ComponentProps> = {
+    componentProps: ComponentProps;
+    action: RenderActions;
+    actionSubject: RenderActionSubjects;
+    handleAnalyticsEvent: FireAnalyticsCallback;
+    propsToIgnore?: Array<keyof ComponentProps>;
+    useShallow?: boolean;
+};
+export declare function RenderTracking<Props>(props: RenderTrackingProps<Props>): null;
+export {};

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

@@ -1,12 +1,13 @@
+/** @jsx jsx */
 import React from 'react';
 import { AnalyticsEventPayload } from '../analytics/events';
 import { WrappedComponentProps } from 'react-intl-next';
-export interface StyleProps {
+export declare type StyleProps = {
     expanded?: boolean;
     focused?: boolean;
     'data-node-type'?: 'expand' | 'nestedExpand';
     'data-title'?: string;
-}
+};
 export interface ExpandProps {
     title: string;
     nodeType: 'expand' | 'nestedExpand';

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { ADFEntity } from '@atlaskit/adf-utils';
 import { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
 import { MediaClientConfig } from '@atlaskit/media-core';
@@ -65,7 +64,6 @@ export declare class MediaCardInternal extends Component<MediaCardProps, State>
     private getOnCardClickCallback;
     render(): JSX.Element | null;
 }
-export declare const CardWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const getClipboardAttrs: ({ id, alt, collection, contextIdentifierProvider, originalDimensions, fileState, }: {
     id: string;
     alt?: string | undefined;

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { RendererAppearance } from './types';
 import { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
@@ -26,30 +25,8 @@ export declare class Renderer extends PureComponent<RendererProps> {
     private fireAnalyticsEvent;
     private getSchema;
     private onMouseDownEditView;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     componentWillUnmount(): void;
 }
-declare type RendererWrapperProps = {
-    appearance: RendererAppearance;
-    dynamicTextSizing: boolean;
-    innerRef?: React.RefObject<HTMLDivElement>;
-    allowColumnSorting?: boolean;
-    allowCopyToClipboard?: boolean;
-    allowPlaceholderText?: boolean;
-    allowCustomPanels?: boolean;
-    allowNestedHeaderLinks: boolean;
-    onClick?: (event: React.MouseEvent) => void;
-    onMouseDown?: (event: React.MouseEvent) => void;
-} & {
-    children?: React.ReactNode;
-};
-/**
- * When the product doesn't provide a IframeWidthObserverFallbackWrapper,
- * we will give one to the renderer,
- *
- * so if we have more than one `WidthProvider` on the content,
- * only one iframe will be created on the older browsers.
- */
-export declare function RendererWrapper(props: RendererWrapperProps): JSX.Element;
-declare const RendererWithAnnotationSelection: (props: RendererProps) => JSX.Element;
+declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

package/dist/types/ui/Renderer/style.d.ts

@@ -1,9 +1,8 @@
-import { HTMLAttributes } from 'react';
+import { Theme } from '@emotion/react';
 import { RendererAppearance } from './types';
 export declare const FullPagePadding = 32;
 export declare type RendererWrapperProps = {
     appearance?: RendererAppearance;
-    theme?: any;
     allowNestedHeaderLinks: boolean;
     allowColumnSorting: boolean;
 };
@@ -12,4 +11,4 @@ export declare const headingSizes: {
         [key: string]: number;
     };
 };
-export declare const Wrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & RendererWrapperProps & HTMLAttributes<{}>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & RendererWrapperProps & HTMLAttributes<{}>>;
+export declare const rendererStyles: (wrapperProps: RendererWrapperProps) => (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/Renderer/truncated-wrapper.d.ts

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 export interface TruncatedWrapperProps {
     height?: number;
@@ -6,5 +8,5 @@ export interface TruncatedWrapperProps {
 }
 export declare class TruncatedWrapper extends Component<TruncatedWrapperProps, {}> {
     constructor(props: TruncatedWrapperProps);
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { WrappedComponentProps } from 'react-intl-next';
 export declare const TableSortIconDataUrl: string;
@@ -12,7 +12,7 @@ declare type Props = {
     isSortingAllowed: boolean;
     sortOrdered?: SortOrder;
 } & WrappedComponentProps;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props>> & {
-    WrappedComponent: React.ComponentType<Props>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props>> & {
+    WrappedComponent: import("react").ComponentType<Props>;
 };
 export default _default;

package/dist/types/ui/annotations/draft/component.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { InsertDraftPosition, Position } from '../types';
 export declare const AnnotationDraft: React.FC<{

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import { AnnotationMarkStates, AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';

package/dist/types/ui/renderer-props.d.ts

@@ -12,6 +12,18 @@ import { RenderOutputStat } from '../render-document';
 import { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps } from './Renderer/types';
 import { MediaOptions } from '../types/mediaOptions';
 import { SmartLinksOptions } from '../types/smartLinksOptions';
+import { ACTION_SUBJECT } from '../analytics/enums';
+export interface RawObjectFeatureFlags {
+    ['renderer-render-tracking']: string;
+}
+export interface NormalizedObjectFeatureFlags {
+    rendererRenderTracking: {
+        [ACTION_SUBJECT.RENDERER]: {
+            enabled: boolean;
+            useShallow: boolean;
+        };
+    };
+}
 export interface RendererProps {
     document: any;
     dataProviders?: ProviderFactory;
@@ -61,7 +73,7 @@ export interface RendererProps {
      * Flags are expected to follow these rules or they are filtered out
      *
      * 1. cased in kebab-case (match [a-z-])
-     * 2. have boolean values
+     * 2. have boolean values or object {} values
      *
      * @example
      * ```tsx
@@ -84,5 +96,5 @@ export interface RendererProps {
      */
     featureFlags?: {
         [featureFlag: string]: boolean;
-    };
+    } | Partial<RawObjectFeatureFlags>;
 }