@atlaskit/renderer 92.0.0 → 93.0.1

package/dist/es2019/react/nodes/table.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import styled from 'styled-components';
 import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -102,8 +101,6 @@ const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-const MainTableContainer = styled.div``;
-
 const canUseLinelength = appearance => appearance === 'full-page' || appearance === 'mobile';
 
 export class TableContainer extends React.Component {
@@ -290,10 +287,10 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       rowHeight: this.headerRowHeight,
       allowDynamicTextSizing: allowDynamicTextSizing
-    }, [children && children[0]]), /*#__PURE__*/React.createElement(MainTableContainer, {
+    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames}`,
       "data-layout": layout,
-      innerRef: this.props.handleRef,
+      ref: this.props.handleRef,
       style: {
         width: tableWidth,
         left: left && left < 0 ? left : undefined

package/dist/es2019/react/utils/performance/RenderTracking.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../analytics/enums';
+export function RenderTracking(props) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      propsDifference,
+      componentId
+    }) => {
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/es2019/render-document.js

@@ -1,4 +1,4 @@
-import { defaultSchema } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';

package/dist/es2019/text/index.js

@@ -1,4 +1,4 @@
-import { defaultSchema } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from './nodes';
 export default class TextSerializer {
   constructor(schema) {

package/dist/es2019/ui/Expand.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { forwardRef, useRef, useCallback } from 'react';
-import { jsx } from '@emotion/react';
-import styled from 'styled-components';
+import React, { useRef, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
-import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, clearNextSiblingMarginTopStyle, ExpandLayoutWrapperWithRef } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';
 import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
-const Title = styled.span`
+const titleStyles = css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -26,29 +25,53 @@ const Title = styled.span`
   padding: 0 0 0 ${gridSize() / 2}px;
   text-align: left;
 `;
-const Container = styled.div`
-  ${sharedExpandStyles.ContainerStyles}
-  padding: 0;
-  padding-bottom: ${props => props.expanded ? gridSize() : 0}px;
-`;
-const TitleContainer = styled.button`
-  ${sharedExpandStyles.TitleContainerStyles}
-  padding: ${gridSize()}px;
-  padding-bottom: ${props => !props.expanded ? gridSize() : 0}px;
-`;
+
+const Container = props => {
+  const paddingBottom = `${props.expanded ? gridSize() : 0}px`;
+  const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  const styles = themeProps => css`
+    ${sharedContainerStyles(themeProps)}
+    padding: 0;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+const TitleContainer = props => {
+  const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
+
+  const styles = themeProps => css`
+    ${sharedExpandStyles.titleContainerStyles(themeProps)}
+    padding: ${gridSize()}px;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("button", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 TitleContainer.displayName = 'TitleContainerButton';
-const ContentContainer = styled.div`
-  ${sharedExpandStyles.ContentStyles};
-  padding-right: ${gridSize() * 2}px;
-  padding-left: ${gridSize() * 5 - gridSize() / 2}px;
-  visibility: ${props => props.expanded ? 'visible' : 'hidden'};
-`;
-const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return jsx(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+
+const ContentContainer = props => {
+  const sharedContentStyles = sharedExpandStyles.contentStyles(props);
+  const visibility = props.expanded ? 'visible' : 'hidden';
+
+  const styles = themeProps => css`
+    ${sharedContentStyles(themeProps)};
+    padding-right: ${gridSize() * 2}px;
+    padding-left: ${gridSize() * 5 - gridSize() / 2}px;
+    visibility: ${visibility};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -115,7 +138,8 @@ function Expand({
     expanded: expanded
   }, jsx(ChevronRightIcon, {
     label: label
-  }))), jsx(Title, {
+  }))), jsx("span", {
+    css: titleStyles,
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded

package/dist/es2019/ui/MediaCard.js

@@ -1,11 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
-import styled from 'styled-components';
 const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -269,7 +267,7 @@ export class MediaCardInternal extends Component {
       collectionName: collection,
       occurrenceKey
     };
-    return /*#__PURE__*/React.createElement(CardWrapper, getClipboardAttrs({
+    return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
       id,
       alt,
       collection,
@@ -298,8 +296,7 @@ export class MediaCardInternal extends Component {
     }));
   }
 
-}
-export const CardWrapper = styled.div``; // Needed for copy & paste
+} // Needed for copy & paste
 
 export const getClipboardAttrs = ({
   id,

package/dist/es2019/ui/Renderer/click-to-edit.js

@@ -1,4 +1,4 @@
-import { fileCardImageViewSelector } from '@atlaskit/media-card';
+import { fileCardImageViewSelector } from '@atlaskit/media-card/classnames';
 import { mediaViewerPopupClass } from '@atlaskit/media-viewer/classnames';
 /**
  * Check if an element is interactive (or otherwise if clicking on it shouldn't transition the

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

@@ -2,22 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import React, { useContext, useLayoutEffect, useRef } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
+import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, LegacyToNextIntlProvider, IntlLegacyFallbackProvider, IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
-import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { DeprecatedWrapper, rendererStyles } from './style';
+import { rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -35,15 +34,21 @@ import { isInteractiveElement } from './click-to-edit';
 import { RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
+import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "featureFlags", memoizeOne(featureFlags => ({
-      featureFlags: normalizeFeatureFlags(featureFlags)
-    })));
+    _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
+      const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking']
+      });
+      return {
+        featureFlags: normalizedFeatureFlags
+      };
+    }));
 
     _defineProperty(this, "fireAnalyticsEvent", event => {
       const {
@@ -276,6 +281,8 @@ export class Renderer extends PureComponent {
     };
 
     try {
+      var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
       const schema = this.getSchema();
       const {
         result,
@@ -291,7 +298,7 @@ export class Renderer extends PureComponent {
         value: this.featureFlags(this.props.featureFlags)
       }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
-      }, jsx(LegacyToNextIntlProvider, null, jsx(IntlLegacyFallbackProvider, null, jsx(AnalyticsContext.Provider, {
+      }, jsx(AnalyticsContext.Provider, {
         value: {
           fireAnalyticsEvent: event => this.fireAnalyticsEvent(event)
         }
@@ -312,11 +319,20 @@ export class Renderer extends PureComponent {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result)))))))));
-      return truncated ? jsx(TruncatedWrapper, {
+      }, result)))))));
+      let rendererResult = truncated ? jsx(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight
       }, rendererOutput) : rendererOutput;
+      const rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[ACTION_SUBJECT.RENDERER];
+      const 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 jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
       if (onError) {
         onError(e);
@@ -361,18 +377,18 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorA
   }
 }, jsx(WithCreateAnalyticsEvent, {
   render: createAnalyticsEvent => {
-    // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+    // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
     return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.RENDERER,
       rethrowError: true,
       fallbackComponent: null,
       createAnalyticsEvent: createAnalyticsEvent
-    }, jsx(IntlNextErrorBoundary, null, jsx(Renderer, _extends({}, props, {
+    }, jsx(IntlErrorBoundary, null, jsx(Renderer, _extends({}, props, {
       createAnalyticsEvent: createAnalyticsEvent
     }))));
   }
 })));
-const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
+const RendererWrapper = /*#__PURE__*/React.memo(props => {
   const {
     allowColumnSorting,
     dynamicTextSizing,
@@ -380,46 +396,25 @@ const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
     innerRef,
     appearance,
     children,
-    subscribe,
     onClick,
     onMouseDown
   } = props;
-  const renderer = jsx(WidthProvider, {
+  return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, jsx(DeprecatedWrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, jsx("div", {
+    ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
-    css: rendererStyles
+    css: rendererStyles({
+      appearance,
+      allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return jsx(IframeWidthObserverFallbackWrapper, null, renderer);
-  }
-
-  return renderer;
 });
-/**
- * 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 function RendererWrapper(props) {
-  return jsx(IframeWrapperConsumer, null, ({
-    subscribe
-  }) => jsx(RendererWithIframeFallbackWrapper, _extends({}, props, {
-    subscribe: subscribe
-  })));
-}
 
 function RendererActionsInternalUpdater({
   children,