@atlaskit/renderer 92.0.0 → 93.0.1

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/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/media.d.ts

@@ -6,7 +6,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { MediaCardProps } from '../../ui/MediaCard';
 import { LinkDefinition } from '@atlaskit/adf-schema';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import { AnalyticsEventPayload } from '../../analytics/events';
 export declare type MediaProps = MediaCardProps & {
     providers?: ProviderFactory;

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/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

@@ -2,12 +2,12 @@
 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,8 +1,5 @@
-/** @jsx jsx */
-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;
@@ -31,27 +28,5 @@ export declare class Renderer extends PureComponent<RendererProps> {
     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.JSX.Element;
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

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

@@ -1,10 +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;
 };
@@ -13,5 +11,4 @@ export declare const headingSizes: {
         [key: string]: number;
     };
 };
-export declare const rendererStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const DeprecatedWrapper: 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/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>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "92.0.0",
+  "version": "93.0.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,27 +24,26 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^22.0.0",
+    "@atlaskit/adf-schema": "^23.0.0",
     "@atlaskit/adf-utils": "^16.0.0",
     "@atlaskit/analytics-listeners": "^8.2.0",
     "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.2.0",
     "@atlaskit/code": "^14.3.0",
-    "@atlaskit/editor-common": "^65.0.0",
+    "@atlaskit/editor-common": "^66.0.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-card": "^73.3.0",
-    "@atlaskit/media-client": "^14.4.0",
-    "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-filmstrip": "^42.2.0",
-    "@atlaskit/media-viewer": "^46.1.0",
-    "@atlaskit/status": "^1.0.0",
-    "@atlaskit/task-decision": "^17.3.0",
+    "@atlaskit/media-card": "^73.5.0",
+    "@atlaskit/media-client": "^15.0.0",
+    "@atlaskit/media-common": "^2.12.0",
+    "@atlaskit/media-filmstrip": "^43.0.0",
+    "@atlaskit/media-viewer": "^46.2.0",
+    "@atlaskit/status": "^1.1.0",
+    "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/width-detector": "^3.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",
@@ -52,35 +51,33 @@
     "prosemirror-model": "1.14.3",
     "prosemirror-transform": "1.3.2",
     "prosemirror-utils": "^1.0.0-0",
-    "react-intl": "^2.6.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-loadable": "^5.1.0",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/smart-card": "^17.7.0",
+    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/smart-card": "^18.0.13",
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.5",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^162.0.0",
-    "@atlaskit/editor-test-helpers": "^16.1.0",
+    "@atlaskit/editor-core": "^164.0.0",
+    "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/logo": "^13.5.0",
-    "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^29.2.0",
+    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/media-integration-test-helpers": "^2.6.0",
+    "@atlaskit/media-test-helpers": "^29.4.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^16.3.0",
+    "@atlaskit/profilecard": "^16.4.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/smart-card": "^17.7.0",
+    "@atlaskit/smart-card": "^18.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
@@ -93,6 +90,7 @@
     "ajv": "^6.12.6",
     "enzyme": "^3.10.0",
     "jsdom": "^16.2.2",
+    "mockdate": "^3.0.2",
     "puppeteer": "10.1.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
@@ -100,7 +98,7 @@
     "react-test-renderer": "^16.8.0",
     "rxjs": "^5.5.0",
     "sinon": "^2.2.0",
-    "typescript": "3.9.6",
+    "typescript": "3.9.10",
     "worker-plugin": "^4.0.2"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"