@atlaskit/renderer 106.0.0 → 106.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 106.0.2
+
+### Patch Changes
+
+- [`8c04b73312e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c04b73312e) - ED-16758 Added data-cell-background attribute to store table cell background color information.
+
+## 106.0.1
+
+### Patch Changes
+
+- [`1bd38dae4ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1bd38dae4ab) - [ux] add back table column max scaling percent logic
+- [`336f7dab111`](https://bitbucket.org/atlassian/atlassian-frontend/commits/336f7dab111) - ED-16200 Updating CRASHED event action to map to new event "unhandledErrorCaughtV2 and moving its errorStack attribute to nonPrivacySafeAttributes"
+- Updated dependencies
+
 ## 106.0.0
 
 ### Patch Changes

package/dist/cjs/react/nodes/table/colgroup.js

@@ -4,10 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Colgroup = void 0;
+exports.calcScalePercent = exports.Colgroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+// we allow scaling down column widths by no more than 30%
+// this intends to reduce unwanted scrolling in the Renderer in these scenarios:
+// User A creates a table with column widths → User B views it on a smaller screen
+// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
+var MAX_SCALING_PERCENT = 0.3;
 var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
   switch (layout) {
     case 'full-width':
@@ -24,14 +29,28 @@ var isTableResized = function isTableResized(columnWidths) {
   });
   return !!filteredWidths.length;
 };
-var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) {
+var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount, scaleDownPercent) {
   if (columnWidth === 0) {
     return columnWidth;
   }
+
+  // If the tables total width (including no zero widths col or cols without width) is less than the current layout
+  // We scale up the columns to meet the minimum of the table layout.
+  if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
+    return Math.floor((1 - scaleDownPercent) * columnWidth);
+  }
   return Math.max(
   // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
   columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
 };
+var calcScalePercent = function calcScalePercent(_ref) {
+  var renderWidth = _ref.renderWidth,
+    tableWidth = _ref.tableWidth,
+    maxScale = _ref.maxScale;
+  var diffPercent = 1 - renderWidth / tableWidth;
+  return diffPercent < maxScale ? diffPercent : maxScale;
+};
+exports.calcScalePercent = calcScalePercent;
 var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
@@ -65,6 +84,7 @@ var Colgroup = function Colgroup(props) {
     minTableWidth += Math.ceil(width) || _editorSharedStyles.akEditorTableLegacyCellMinWidth;
   });
   var cellMinWidth = 0;
+  var scaleDownPercent = 0;
   // fixes migration tables with zero-width columns
   if (zeroWidthColumnsCount > 0) {
     if (minTableWidth > maxTableWidth) {
@@ -72,12 +92,20 @@ var Colgroup = function Colgroup(props) {
       cellMinWidth = minWidth < _editorSharedStyles.akEditorTableLegacyCellMinWidth ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : minWidth;
     }
   }
+  // scaling down
+  else if (renderWidth < tableWidth) {
+    scaleDownPercent = calcScalePercent({
+      renderWidth: renderWidth,
+      tableWidth: tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
   return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
     style: {
       width: _editorSharedStyles.akEditorTableNumberColumnWidth
     }
   }), columnWidths.map(function (colWidth, idx) {
-    var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
+    var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     var style = width ? {
       width: "".concat(width, "px")
     } : {};

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

@@ -52,11 +52,28 @@ var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-var getDataAttributes = function getDataAttributes(colwidth) {
+var getDataAttributes = function getDataAttributes(colwidth, background) {
   var attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
+  /**
+   * Storing hex code in data-cell-background because
+   *  we want to have DST token (css variable) or
+   *  DST token value (value (hex code) of css variable) in
+   *  inline style to correct render table cell background
+   *  based on selected theme.
+   * Currently we rely on background color hex code stored in
+   *  inline style.
+   * Because of that when we copy and paste table, we end up
+   *  having DST token or DST token value in ADF instead of
+   *  original hex code which we map to DST token.
+   * So, introducing data-cell-background.
+   * More details at https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3472556903/Tokenising+tableCell+background+colors#Update-toDom-and-parseDom-to-store-and-read-background-color-from-data-cell-background-attribute.4
+   */
+  if (background) {
+    attrs['data-cell-background'] = background;
+  }
   return attrs;
 };
 var getStyle = function getStyle(background, colGroupWidth, offsetTop) {
@@ -105,7 +122,7 @@ var withCellProps = function withCellProps(WrapperComponent) {
           colorname: colorName,
           onClick: onClick,
           className: className
-        }, getDataAttributes(colwidth), {
+        }, getDataAttributes(colwidth, background), {
           "aria-sort": ariaSort
         }), children);
       }

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

@@ -64,9 +64,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
         attributes: {
           platform: _events.PLATFORM.WEB,
           errorMessage: error === null || error === void 0 ? void 0 : error.message,
-          errorStack: error === null || error === void 0 ? void 0 : error.stack,
           componentStack: errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack,
           errorRethrown: Boolean(this.props.rethrowError)
+        },
+        nonPrivacySafeAttributes: {
+          errorStack: error === null || error === void 0 ? void 0 : error.stack
         }
       });
       if (this.hasFallback()) {

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

@@ -55,7 +55,7 @@ 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 = "106.0.0";
+var packageVersion = "106.0.2";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/version.json

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

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+// we allow scaling down column widths by no more than 30%
+// this intends to reduce unwanted scrolling in the Renderer in these scenarios:
+// User A creates a table with column widths → User B views it on a smaller screen
+// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
+const MAX_SCALING_PERCENT = 0.3;
 const getTableLayoutWidth = (layout, opts) => {
   switch (layout) {
     case 'full-width':
@@ -15,14 +20,28 @@ const isTableResized = columnWidths => {
   const filteredWidths = columnWidths.filter(width => width !== 0);
   return !!filteredWidths.length;
 };
-const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) => {
+const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount, scaleDownPercent) => {
   if (columnWidth === 0) {
     return columnWidth;
   }
+
+  // If the tables total width (including no zero widths col or cols without width) is less than the current layout
+  // We scale up the columns to meet the minimum of the table layout.
+  if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
+    return Math.floor((1 - scaleDownPercent) * columnWidth);
+  }
   return Math.max(
   // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
+export const calcScalePercent = ({
+  renderWidth,
+  tableWidth,
+  maxScale
+}) => {
+  const diffPercent = 1 - renderWidth / tableWidth;
+  return diffPercent < maxScale ? diffPercent : maxScale;
+};
 export const Colgroup = props => {
   let {
     columnWidths,
@@ -58,6 +77,7 @@ export const Colgroup = props => {
     minTableWidth += Math.ceil(width) || akEditorTableLegacyCellMinWidth;
   });
   let cellMinWidth = 0;
+  let scaleDownPercent = 0;
   // fixes migration tables with zero-width columns
   if (zeroWidthColumnsCount > 0) {
     if (minTableWidth > maxTableWidth) {
@@ -65,12 +85,20 @@ export const Colgroup = props => {
       cellMinWidth = minWidth < akEditorTableLegacyCellMinWidth ? akEditorTableLegacyCellMinWidth : minWidth;
     }
   }
+  // scaling down
+  else if (renderWidth < tableWidth) {
+    scaleDownPercent = calcScalePercent({
+      renderWidth,
+      tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     style: {
       width: akEditorTableNumberColumnWidth
     }
   }), columnWidths.map((colWidth, idx) => {
-    const width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
+    const width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     const style = width ? {
       width: `${width}px`
     } : {};

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

@@ -39,11 +39,28 @@ const getSortOrderLabel = (intl, currentSortOrder) => {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-const getDataAttributes = colwidth => {
+const getDataAttributes = (colwidth, background) => {
   const attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
+  /**
+   * Storing hex code in data-cell-background because
+   *  we want to have DST token (css variable) or
+   *  DST token value (value (hex code) of css variable) in
+   *  inline style to correct render table cell background
+   *  based on selected theme.
+   * Currently we rely on background color hex code stored in
+   *  inline style.
+   * Because of that when we copy and paste table, we end up
+   *  having DST token or DST token value in ADF instead of
+   *  original hex code which we map to DST token.
+   * So, introducing data-cell-background.
+   * More details at https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3472556903/Tokenising+tableCell+background+colors#Update-toDom-and-parseDom-to-store-and-read-background-color-from-data-cell-background-attribute.4
+   */
+  if (background) {
+    attrs['data-cell-background'] = background;
+  }
   return attrs;
 };
 const getStyle = (background, colGroupWidth, offsetTop) => {
@@ -85,7 +102,7 @@ const withCellProps = WrapperComponent => {
         colorname: colorName,
         onClick: onClick,
         className: className
-      }, getDataAttributes(colwidth), {
+      }, getDataAttributes(colwidth, background), {
         "aria-sort": ariaSort
       }), children);
     }

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

@@ -34,9 +34,11 @@ export class ErrorBoundary extends React.Component {
       attributes: {
         platform: PLATFORM.WEB,
         errorMessage: error === null || error === void 0 ? void 0 : error.message,
-        errorStack: error === null || error === void 0 ? void 0 : error.stack,
         componentStack: errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack,
         errorRethrown: Boolean(this.props.rethrowError)
+      },
+      nonPrivacySafeAttributes: {
+        errorStack: error === null || error === void 0 ? void 0 : error.stack
       }
     });
     if (this.hasFallback()) {

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

@@ -35,7 +35,7 @@ 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 = "106.0.0";
+const packageVersion = "106.0.2";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then

package/dist/es2019/version.json

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

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+// we allow scaling down column widths by no more than 30%
+// this intends to reduce unwanted scrolling in the Renderer in these scenarios:
+// User A creates a table with column widths → User B views it on a smaller screen
+// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
+var MAX_SCALING_PERCENT = 0.3;
 var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
   switch (layout) {
     case 'full-width':
@@ -17,14 +22,27 @@ var isTableResized = function isTableResized(columnWidths) {
   });
   return !!filteredWidths.length;
 };
-var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) {
+var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount, scaleDownPercent) {
   if (columnWidth === 0) {
     return columnWidth;
   }
+
+  // If the tables total width (including no zero widths col or cols without width) is less than the current layout
+  // We scale up the columns to meet the minimum of the table layout.
+  if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
+    return Math.floor((1 - scaleDownPercent) * columnWidth);
+  }
   return Math.max(
   // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
+export var calcScalePercent = function calcScalePercent(_ref) {
+  var renderWidth = _ref.renderWidth,
+    tableWidth = _ref.tableWidth,
+    maxScale = _ref.maxScale;
+  var diffPercent = 1 - renderWidth / tableWidth;
+  return diffPercent < maxScale ? diffPercent : maxScale;
+};
 export var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
@@ -58,6 +76,7 @@ export var Colgroup = function Colgroup(props) {
     minTableWidth += Math.ceil(width) || akEditorTableLegacyCellMinWidth;
   });
   var cellMinWidth = 0;
+  var scaleDownPercent = 0;
   // fixes migration tables with zero-width columns
   if (zeroWidthColumnsCount > 0) {
     if (minTableWidth > maxTableWidth) {
@@ -65,12 +84,20 @@ export var Colgroup = function Colgroup(props) {
       cellMinWidth = minWidth < akEditorTableLegacyCellMinWidth ? akEditorTableLegacyCellMinWidth : minWidth;
     }
   }
+  // scaling down
+  else if (renderWidth < tableWidth) {
+    scaleDownPercent = calcScalePercent({
+      renderWidth: renderWidth,
+      tableWidth: tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     style: {
       width: akEditorTableNumberColumnWidth
     }
   }), columnWidths.map(function (colWidth, idx) {
-    var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
+    var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     var style = width ? {
       width: "".concat(width, "px")
     } : {};

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

@@ -45,11 +45,28 @@ var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-var getDataAttributes = function getDataAttributes(colwidth) {
+var getDataAttributes = function getDataAttributes(colwidth, background) {
   var attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
+  /**
+   * Storing hex code in data-cell-background because
+   *  we want to have DST token (css variable) or
+   *  DST token value (value (hex code) of css variable) in
+   *  inline style to correct render table cell background
+   *  based on selected theme.
+   * Currently we rely on background color hex code stored in
+   *  inline style.
+   * Because of that when we copy and paste table, we end up
+   *  having DST token or DST token value in ADF instead of
+   *  original hex code which we map to DST token.
+   * So, introducing data-cell-background.
+   * More details at https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3472556903/Tokenising+tableCell+background+colors#Update-toDom-and-parseDom-to-store-and-read-background-color-from-data-cell-background-attribute.4
+   */
+  if (background) {
+    attrs['data-cell-background'] = background;
+  }
   return attrs;
 };
 var getStyle = function getStyle(background, colGroupWidth, offsetTop) {
@@ -98,7 +115,7 @@ var withCellProps = function withCellProps(WrapperComponent) {
           colorname: colorName,
           onClick: onClick,
           className: className
-        }, getDataAttributes(colwidth), {
+        }, getDataAttributes(colwidth, background), {
           "aria-sort": ariaSort
         }), children);
       }

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

@@ -57,9 +57,11 @@ export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
         attributes: {
           platform: PLATFORM.WEB,
           errorMessage: error === null || error === void 0 ? void 0 : error.message,
-          errorStack: error === null || error === void 0 ? void 0 : error.stack,
           componentStack: errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack,
           errorRethrown: Boolean(this.props.rethrowError)
+        },
+        nonPrivacySafeAttributes: {
+          errorStack: error === null || error === void 0 ? void 0 : error.stack
         }
       });
       if (this.hasFallback()) {

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

@@ -45,7 +45,7 @@ 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 = "106.0.0";
+var packageVersion = "106.0.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/version.json

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

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

@@ -1,4 +1,4 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP } from '@atlaskit/editor-common/analytics';
 import { AEP } from './enums';
 import { PropsDifference, SEVERITY, ShallowPropsDifference, UNSUPPORTED_CONTENT_LEVEL_SEVERITY } from '@atlaskit/editor-common/utils';
 import type { UnsupportedContentPayload, UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
@@ -28,13 +28,15 @@ declare type RendererReRenderedAEP<Props> = AEP<ACTION.RE_RENDERED, ACTION_SUBJE
     count: number;
     componentId?: string;
 }, EVENT_TYPE.OPERATIONAL>;
-export declare type ComponentCrashErrorAEP = AEP<ACTION.CRASHED, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
+export declare type ComponentCrashErrorAEP = OperationalAEP<ACTION.CRASHED, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
     platform: PLATFORM.WEB;
     errorMessage?: string;
     errorStack?: string;
     componentStack?: string;
     errorRethrown?: boolean;
-}, EVENT_TYPE.OPERATIONAL>;
+}, {
+    errorStack?: string;
+}>;
 declare type InvalidProsemirrorDocumentErrorAEP = AEP<ACTION.INVALID_PROSEMIRROR_DOCUMENT, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
     platform: PLATFORM.WEB;
     errorStack?: string;

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

@@ -1,3 +1,9 @@
 /// <reference types="react" />
 import { SharedTableProps } from './types';
+export interface ScaleOptions {
+    renderWidth: number;
+    tableWidth: number;
+    maxScale: number;
+}
+export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale, }: ScaleOptions) => number;
 export declare const Colgroup: (props: SharedTableProps) => JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "106.0.0",
+  "version": "106.0.2",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,30 +24,30 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^25.1.0",
+    "@atlaskit/adf-schema": "^25.2.0",
     "@atlaskit/adf-utils": "^18.0.0",
     "@atlaskit/analytics-listeners": "^8.5.0",
     "@atlaskit/analytics-namespaced-context": "^6.6.0",
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/code": "^14.4.0",
-    "@atlaskit/editor-common": "^72.2.0",
+    "@atlaskit/editor-common": "^72.4.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
     "@atlaskit/editor-palette": "1.0.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/emoji": "^67.0.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-card": "^74.5.0",
+    "@atlaskit/media-card": "^74.6.0",
     "@atlaskit/media-client": "^20.0.0",
     "@atlaskit/media-common": "^2.19.0",
     "@atlaskit/media-filmstrip": "^46.1.0",
     "@atlaskit/media-ui": "^22.3.0",
     "@atlaskit/media-viewer": "^47.4.0",
-    "@atlaskit/smart-card": "^24.0.0",
+    "@atlaskit/smart-card": "^24.3.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^179.0.0",
+    "@atlaskit/editor-core": "^179.1.0",
     "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/link-provider": "^1.4.0",
     "@atlaskit/logo": "^13.11.0",
@@ -80,7 +80,7 @@
     "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^18.2.0",
+    "@atlaskit/profilecard": "^18.3.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",
@@ -95,7 +95,7 @@
     "ajv": "^6.12.6",
     "enzyme": "^3.10.0",
     "jsdom": "^16.2.2",
-    "mockdate": "^3.0.2",
+    "mockdate": "^3.0.5",
     "puppeteer": "13.7.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
@@ -110,7 +110,9 @@
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens",
+      "design-tokens": [
+        "color"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion"