@atlaskit/renderer 103.0.2 → 104.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 104.0.0
+
+### Major Changes
+
+- [`2df5ab17c10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2df5ab17c10) - DSP-6459: Adds a background to code blocks in the editor to remove transparency. E.g. prevents table cell background colors from affecting code blocks. Also modifies code blocks in table headers to have a border instead of a different color when design tokens are enabled.
+
+### Patch Changes
+
+- [`c472a1eed2f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c472a1eed2f) - DSP-3443 Updates tokens used for floating buttons; updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`34f8542468b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34f8542468b) - [ED-12592] Updates the renderer rendered measurement to indicate when the measurement is distorted. Re uses distorted measurement identification logic from other render measurements.
+- [`977ac74443c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/977ac74443c) - DSP-7235: Fixes issue with overflow shadows on code blocks due to layered transparent colors.
+- [`c2510fa261f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2510fa261f) - [ux] ED-15961 [ux] Updates the presentation of text color to use dark and light mode colors when those modes are enabled
+- Updated dependencies
+
 ## 103.0.2
 
 ### Patch Changes

package/dist/cjs/react/marks/textColor.js

@@ -15,14 +15,20 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _editorPalette = require("@atlaskit/editor-palette");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function TextColor(props) {
+  // Note -- while there is no way to create custom colors using default tooling
+  // the editor does supported ad hoc color values -- and there may be content
+  // which has been migrated or created via apis which use such values.
+  var paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(props.color) || props.color;
   var style = (0, _react.useMemo)(function () {
-    return (0, _defineProperty2.default)({}, '--custom-text-color', props.color);
-  }, [props.color]);
+    return (0, _defineProperty2.default)({}, '--custom-palette-color', paletteColorValue);
+  }, [paletteColorValue]);
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, props.dataAttributes, {
     "data-text-custom-color": props.color,
     className: "fabric-text-color-mark",

package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -23,16 +23,19 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _codeBlockCopyButton = _interopRequireDefault(require("../../codeBlockCopyButton"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 // TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n    }\n  "])), (0, _components.themed)({
+    light: (0, _tokens.token)('elevation.surface.raised', _colors.N20),
+    dark: (0, _tokens.token)('elevation.surface.raised', _colors.DN50)
+  })(props), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: _colors.N20,
-      dark: _colors.DN50
+      light: (0, _tokens.token)('color.background.neutral', _colors.N20),
+      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }));

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

@@ -21,7 +21,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 
@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.icon', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.background.neutral.hovered', _colors.N30), (0, _tokens.token)('color.background.neutral.bold.pressed', _colors.N700), (0, _tokens.token)('color.icon.inverse', '#fff'));
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.border', '#fff'), (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('color.text', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.pressed', _colors.N30), (0, _tokens.token)('elevation.surface.overlay', _colors.N700), (0, _tokens.token)('color.text', '#fff'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N700));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
@@ -68,7 +68,7 @@ var CopyButton = function CopyButton(_ref) {
     position: "top"
   }, (0, _react.jsx)("div", {
     onMouseLeave: onMouseLeave
-  }, (0, _react.jsx)(_customThemeButton.default, {
+  }, (0, _react.jsx)(_button.default, {
     className: className,
     "aria-label": tooltip,
     spacing: "compact",

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

@@ -102,18 +102,23 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "103.0.2";
+var packageVersion = "104.0.0";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
 
   var _super = _createSuper(Renderer);
 
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
   function Renderer(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, Renderer);
     _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _utils.getDistortedDurationMonitor)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
       var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -277,6 +282,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             attributes: {
               platform: _events.PLATFORM.WEB,
               duration: duration,
+              distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
               ttfb: (0, _utils.getResponseEndTime)(),
               nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
@@ -286,6 +292,10 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             },
             eventType: _enums.EVENT_TYPE.OPERATIONAL
           });
+
+          _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
+
+          delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
 
         _this2.anchorLinkAnalytics();

package/dist/cjs/version.json

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

package/dist/es2019/react/marks/textColor.js

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 export default function TextColor(props) {
+  // Note -- while there is no way to create custom colors using default tooling
+  // the editor does supported ad hoc color values -- and there may be content
+  // which has been migrated or created via apis which use such values.
+  const paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
   const style = useMemo(() => ({
-    ['--custom-text-color']: props.color
-  }), [props.color]);
+    ['--custom-palette-color']: paletteColorValue
+  }), [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
     "data-text-custom-color": props.color,
     className: "fabric-text-color-mark",

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -6,24 +6,27 @@ import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CopyButton from '../../codeBlockCopyButton';
+import { token } from '@atlaskit/tokens'; // TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
 
-// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const codeBlockStyleOverrides = props => css`
     tab-size: 4;
+    background-color: ${themed({
+  light: token('elevation.surface.raised', N20),
+  dark: token('elevation.surface.raised', DN50)
+})(props)};
+
     ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
       font-size: ${relativeFontSizeToBase16(fontSize())};
       line-height: 1.5rem;
       background-image: ${overflowShadow({
   background: themed({
-    light: N20,
-    dark: DN50
+    light: token('color.background.neutral', N20),
+    dark: token('color.background.neutral', DN50)
   })(props),
   width: `${gridSize()}px`
 })};
-      background-attachment: local, scroll, scroll;
-      background-position: 100% 0, 100% 0, 0 0;
+      background-attachment: local, local, local, local, scroll, scroll;
+      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;
     }
   `;
 

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

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { copyTextToClipboard } from '../utils/clipboard';
@@ -26,19 +26,28 @@ const copyButtonWrapperStyles = css`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid ${token('color.border.inverse', '#fff')};
+    border: 2px solid ${token('color.border', '#fff')};
     border-radius: 4px;
-    background-color: ${token('color.background.neutral.subtle', N20)};
-    color: ${token('color.icon', 'rgb(66, 82, 110)')};
+    background-color: ${token('elevation.surface.overlay', N20)};
+    color: ${token('color.text', 'rgb(66, 82, 110)')} !important;
   }
 
   button:hover {
-    background-color: ${token('color.background.neutral.hovered', N30)};
+    border: 2px solid ${token('color.border', 'transparent')};
+    background-color: ${token('elevation.surface.overlay.hovered', N30)};
+  }
+
+  button:active {
+    border: 2px solid ${token('color.border', 'transparent')};
+    background-color: ${token('elevation.surface.overlay.pressed', N30)};
   }
 
   button.clicked {
-    background-color: ${token('color.background.neutral.bold.pressed', N700)};
-    color: ${token('color.icon.inverse', '#fff')} !important;
+    background-color: ${token('elevation.surface.overlay', N700)};
+    color: ${token('color.text', '#fff')} !important;
+  }
+  button.clicked:hover {
+    background-color: ${token('elevation.surface.overlay.hovered', N700)};
   }
 `;
 

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

@@ -9,7 +9,7 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, browser } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -36,11 +36,17 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "103.0.2";
+const packageVersion = "104.0.0";
 export class Renderer extends PureComponent {
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
+
     _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
       const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -208,6 +214,7 @@ export class Renderer extends PureComponent {
           attributes: {
             platform: PLATFORM.WEB,
             duration,
+            distortedDuration: this.renderedMeasurementDistortedDurationMonitor.distortedDuration,
             ttfb: getResponseEndTime(),
             nodes: reduce(this.props.document, (acc, node) => {
               acc[node.type] = (acc[node.type] || 0) + 1;
@@ -217,6 +224,8 @@ export class Renderer extends PureComponent {
           },
           eventType: EVENT_TYPE.OPERATIONAL
         });
+        this.renderedMeasurementDistortedDurationMonitor.cleanup();
+        delete this.renderedMeasurementDistortedDurationMonitor;
       });
       this.anchorLinkAnalytics();
     });

package/dist/es2019/version.json

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

package/dist/esm/react/marks/textColor.js

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 export default function TextColor(props) {
+  // Note -- while there is no way to create custom colors using default tooling
+  // the editor does supported ad hoc color values -- and there may be content
+  // which has been migrated or created via apis which use such values.
+  var paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
   var style = useMemo(function () {
-    return _defineProperty({}, '--custom-text-color', props.color);
-  }, [props.color]);
+    return _defineProperty({}, '--custom-palette-color', paletteColorValue);
+  }, [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
     "data-text-custom-color": props.color,
     className: "fabric-text-color-mark",

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -10,15 +10,16 @@ import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CopyButton from '../../codeBlockCopyButton';
+import { token } from '@atlaskit/tokens'; // TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
 
-// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n    }\n  "])), themed({
+    light: token('elevation.surface.raised', N20),
+    dark: token('elevation.surface.raised', DN50)
+  })(props), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
     background: themed({
-      light: N20,
-      dark: DN50
+      light: token('color.background.neutral', N20),
+      dark: token('color.background.neutral', DN50)
     })(props),
     width: "".concat(gridSize(), "px")
   }));

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

@@ -8,13 +8,13 @@ import { css, jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
 import { token } from '@atlaskit/tokens';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), token('color.border', '#fff'), token('elevation.surface.overlay', N20), token('color.text', 'rgb(66, 82, 110)'), token('color.border', 'transparent'), token('elevation.surface.overlay.hovered', N30), token('color.border', 'transparent'), token('elevation.surface.overlay.pressed', N30), token('elevation.surface.overlay', N700), token('color.text', '#fff'), token('elevation.surface.overlay.hovered', N700));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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

@@ -23,7 +23,7 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, browser } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -50,12 +50,16 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "103.0.2";
+var packageVersion = "104.0.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 
   var _super = _createSuper(Renderer);
 
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
   function Renderer(props) {
     var _this;
 
@@ -63,6 +67,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
+
     _defineProperty(_assertThisInitialized(_this), "featureFlags", memoizeOne(function (featureFlags) {
       var normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -231,6 +237,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
             attributes: {
               platform: PLATFORM.WEB,
               duration: duration,
+              distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
               ttfb: getResponseEndTime(),
               nodes: reduce(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
@@ -240,6 +247,10 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
             },
             eventType: EVENT_TYPE.OPERATIONAL
           });
+
+          _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
+
+          delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
 
         _this2.anchorLinkAnalytics();

package/dist/esm/version.json

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

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

@@ -17,6 +17,7 @@ declare type RendererStartAEP = AEP<ACTION.STARTED, ACTION_SUBJECT.RENDERER, und
 declare type RendererRenderedAEP = AEP<ACTION.RENDERED, ACTION_SUBJECT.RENDERER, undefined, {
     platform: PLATFORM.WEB;
     duration: number;
+    distortedDuration: boolean;
     ttfb?: number;
     nodes: Record<string, number>;
     severity?: SEVERITY;

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

@@ -16,6 +16,11 @@ export declare class Renderer extends PureComponent<RendererProps> {
     private editorRef;
     private mouseDownSelection?;
     private id?;
+    /**
+     * This is used in measuring the Renderer Mount time and is then
+     * deleted once that measurement occurs.
+     */
+    private renderedMeasurementDistortedDurationMonitor?;
     constructor(props: RendererProps);
     private anchorLinkAnalytics;
     componentDidMount(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "103.0.2",
+  "version": "104.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,19 +29,20 @@
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/code": "^14.4.0",
-    "@atlaskit/editor-common": "^70.2.0",
+    "@atlaskit/editor-common": "^71.0.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
+    "@atlaskit/editor-palette": "0.1.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-card": "^74.2.0",
-    "@atlaskit/media-client": "^18.1.0",
+    "@atlaskit/media-card": "^74.3.0",
+    "@atlaskit/media-client": "^19.0.0",
     "@atlaskit/media-common": "^2.17.0",
-    "@atlaskit/media-filmstrip": "^46.0.0",
-    "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/smart-card": "^23.4.0",
+    "@atlaskit/media-filmstrip": "^46.1.0",
+    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-viewer": "^47.2.0",
+    "@atlaskit/smart-card": "^23.7.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
@@ -69,7 +70,7 @@
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^175.0.0",
+    "@atlaskit/editor-core": "^176.0.0",
     "@atlaskit/editor-test-helpers": "^17.2.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
@@ -78,7 +79,7 @@
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^17.2.0",
+    "@atlaskit/profilecard": "^17.3.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/renderer"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -139,28 +144,28 @@ type AEP<Action, ActionSubject, ActionSubjectID, Attributes, EventType> = {
 
 // @public (undocumented)
 type AnalyticsEventPayload<T = void> =
-  | RendererStartAEP
-  | RendererRenderedAEP
-  | RendererReRenderedAEP<T>
+  | AnchorLinkAEP
+  | AnnotationAEP
+  | AnnotationDeleteAEP
   | ComponentCrashErrorAEP
-  | RendererUnsupportedContentLevelsTrackingSucceeded
-  | RendererUnsupportedContentLevelsTrackingErrored
+  | ExpandAEP
+  | HeadingAnchorLinkButtonAEP
+  | InvalidProsemirrorDocumentErrorAEP
+  | MediaLnkTransformedAEP
+  | RendererReRenderedAEP<T>
+  | RendererRenderedAEP
   | RendererSelectAllCaughtAEP
   | RendererSelectAllEscapedAEP
-  | HeadingAnchorLinkButtonAEP
-  | AnchorLinkAEP
-  | TableSortColumnNotAllowedAEP
+  | RendererStartAEP
+  | RendererTTIAEP
+  | RendererUnsupportedContentLevelsTrackingErrored
+  | RendererUnsupportedContentLevelsTrackingSucceeded
   | TableSortColumnAEP
-  | VisitLinkAEP
-  | VisitMediaLinkAEP
-  | ExpandAEP
+  | TableSortColumnNotAllowedAEP
   | UnsupportedContentPayload
   | UnsupportedContentTooltipPayload
-  | AnnotationAEP
-  | AnnotationDeleteAEP
-  | MediaLnkTransformedAEP
-  | InvalidProsemirrorDocumentErrorAEP
-  | RendererTTIAEP;
+  | VisitLinkAEP
+  | VisitMediaLinkAEP;
 
 // @public (undocumented)
 type AnchorLinkAEP = UIAEP<
@@ -175,14 +180,14 @@ type AnchorLinkAEP = UIAEP<
 
 // @public (undocumented)
 type AnnotationActionType =
-  | ACTION.INSERTED
   | ACTION.CLOSED
-  | ACTION.EDITED
+  | ACTION.CREATE_NOT_ALLOWED
   | ACTION.DELETED
+  | ACTION.EDITED
+  | ACTION.INSERTED
   | ACTION.OPENED
   | ACTION.RESOLVED
-  | ACTION.VIEWED
-  | ACTION.CREATE_NOT_ALLOWED;
+  | ACTION.VIEWED;
 
 // @public (undocumented)
 type AnnotationAEP = AEP<
@@ -281,7 +286,7 @@ type HeadingAnchorLinksConfig = {
 };
 
 // @public (undocumented)
-export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export type HeadingAnchorLinksProps = HeadingAnchorLinksConfig | boolean;
 
 // @public (undocumented)
 type InvalidProsemirrorDocumentErrorAEP = AEP<
@@ -525,10 +530,10 @@ export interface RendererProps {
   // (undocumented)
   fadeOutHeight?: number;
   featureFlags?:
+    | Partial<RawObjectFeatureFlags>
     | {
         [featureFlag: string]: boolean;
-      }
-    | Partial<RawObjectFeatureFlags>;
+      };
   // (undocumented)
   innerRef?: React.RefObject<HTMLDivElement>;
   // (undocumented)
@@ -569,6 +574,7 @@ type RendererRenderedAEP = AEP<
   {
     platform: PLATFORM.WEB;
     duration: number;
+    distortedDuration: boolean;
     ttfb?: number;
     nodes: Record<string, number>;
     severity?: SEVERITY;
@@ -717,10 +723,10 @@ type StickyHeaderConfig = {
 
 // @public (undocumented)
 type StickyHeaderProps =
-  | boolean
   | ({
       show?: boolean;
-    } & StickyHeaderConfig);
+    } & StickyHeaderConfig)
+  | boolean;
 
 // @public (undocumented)
 type TableSortColumnAEP = AEP<
@@ -807,3 +813,5 @@ type VisitMediaLinkAEP = AEP<
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->