@atlaskit/renderer 124.4.0 → 124.4.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 124.4.2
+
+### Patch Changes
+
+- [`71cac2e4cf915`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71cac2e4cf915) -
+  [FF-CLEANUP] platform_editor_add_border_for_nested_panel
+- [`c0ef0bedb49c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0ef0bedb49c0) -
+  EDITOR-1391 only send table width information events if there are tables, add enums and boolean
+  values for table width, editor width and scrollbar existence for ingestion in signalfx
+- Updated dependencies
+
+## 124.4.1
+
+### Patch Changes
+
+- [`dbb9e84ab30e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbb9e84ab30e0) -
+  [ux] dense mode emoji icon in panel
+- [`b647f715408c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b647f715408c4) -
+  clean up platform_custom_number_column
+- Updated dependencies
+
 ## 124.4.0
 
 ### Minor Changes

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

@@ -116,7 +116,7 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
 
   // when table resized and number column is enabled, we need to scale down the table in render
   if (forceScaleForNumColumn) {
-    var calculatedTableContainerWidth = rendererAppearance === 'comment' && (0, _platformFeatureFlags.fg)('platform_custom_number_column') ? sumOfColumns : tableContainerWidth;
+    var calculatedTableContainerWidth = rendererAppearance === 'comment' ? sumOfColumns : tableContainerWidth;
     var scalePercentage = +((calculatedTableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth) / calculatedTableContainerWidth);
     var targetMaxWidth = calculatedTableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth;
     var totalWidthAfterScale = 0;

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

@@ -1501,7 +1501,7 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
 // Default: 20px emoji at 16px base font
 // Scaled: 20px * (baseFontSize/16)
 // E.g., dense mode (13px base): 20px * (13/16) = 16.25px
-var denseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
+var denseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
   maxHeight: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
@@ -1511,6 +1511,9 @@ var denseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".con
     height: '100%',
     objectFit: 'contain'
   }
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .ak-editor-panel .ak-editor-panel__icon"), {
+  height: "var(--ds-space-250, 20px)",
+  width: "var(--ds-space-250, 20px)"
 }));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,

package/dist/cjs/ui/Renderer/analytics-utils.js

@@ -1,13 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWidthInfoPayload = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var getWidthInfoPayload = exports.getWidthInfoPayload = function getWidthInfoPayload(renderer) {
   var tablesInfo = [];
   var tableWrappers = renderer.querySelectorAll('.pm-table-wrapper');
+
+  // only send the event if there are tables on the page
+  if (tableWrappers.length === 0) {
+    return undefined;
+  }
   tableWrappers.forEach(function (tableWrapper) {
     var table = tableWrapper.querySelector(':scope > table');
     if (table) {
@@ -19,12 +27,22 @@ var getWidthInfoPayload = exports.getWidthInfoPayload = function getWidthInfoPay
       });
     }
   });
+  var maxTableWidth = Math.max.apply(Math, (0, _toConsumableArray2.default)(tablesInfo.map(function (table) {
+    return table.tableWidth;
+  })));
+  var editorWidth = renderer.scrollWidth;
   return {
     action: _analytics.TABLE_ACTION.TABLE_WIDTH_INFO,
     actionSubject: _analytics.ACTION_SUBJECT.TABLE,
     attributes: {
-      editorWidth: renderer.scrollWidth,
+      editorWidth: editorWidth,
+      editorWidthBreakpoint: (0, _analytics2.getBreakpointKey)(editorWidth),
       tableWidthInfo: tablesInfo,
+      maxTableWidthBreakpoint: (0, _analytics2.getBreakpointKey)(maxTableWidth),
+      hasTableWiderThanEditor: maxTableWidth > editorWidth,
+      hasTableWithScrollbar: tablesInfo.some(function (table) {
+        return table.hasScrollbar;
+      }),
       mode: _analytics.MODE.RENDERER
     },
     eventType: _analytics.EVENT_TYPE.OPERATIONAL

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.3.0";
+var packageVersion = "124.4.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -369,7 +369,10 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
             var _props$innerRef;
             var renderer = (_props$innerRef = props.innerRef) === null || _props$innerRef === void 0 || (_props$innerRef = _props$innerRef.current) === null || _props$innerRef === void 0 ? void 0 : _props$innerRef.querySelector('.ak-renderer-document');
             if (renderer) {
-              _fireAnalyticsEvent((0, _analyticsUtils.getWidthInfoPayload)(renderer));
+              var payload = (0, _analyticsUtils.getWidthInfoPayload)(renderer);
+              if (payload) {
+                _fireAnalyticsEvent(payload);
+              }
             }
           };
           if (window && typeof window.requestIdleCallback === 'function') {

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

@@ -103,7 +103,7 @@ const renderScaleDownColgroup = props => {
 
   // when table resized and number column is enabled, we need to scale down the table in render
   if (forceScaleForNumColumn) {
-    const calculatedTableContainerWidth = rendererAppearance === 'comment' && fg('platform_custom_number_column') ? sumOfColumns : tableContainerWidth;
+    const calculatedTableContainerWidth = rendererAppearance === 'comment' ? sumOfColumns : tableContainerWidth;
     const scalePercentage = +((calculatedTableContainerWidth - akEditorTableNumberColumnWidth) / calculatedTableContainerWidth);
     const targetMaxWidth = calculatedTableContainerWidth - akEditorTableNumberColumnWidth;
     let totalWidthAfterScale = 0;

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

@@ -1914,6 +1914,12 @@ const denseEmojiStyles = css({
       height: '100%',
       objectFit: 'contain'
     }
+  },
+  // Scale panel icon
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  [`.${RendererCssClassName.DOCUMENT} .ak-editor-panel .ak-editor-panel__icon`]: {
+    height: "var(--ds-space-250, 20px)",
+    width: "var(--ds-space-250, 20px)"
   }
 });
 export const RendererStyleContainer = props => {

package/dist/es2019/ui/Renderer/analytics-utils.js

@@ -1,7 +1,13 @@
 import { TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE } from '@atlaskit/editor-common/analytics';
+import { getBreakpointKey } from '@atlaskit/editor-common/utils/analytics';
 export const getWidthInfoPayload = renderer => {
   const tablesInfo = [];
   const tableWrappers = renderer.querySelectorAll('.pm-table-wrapper');
+
+  // only send the event if there are tables on the page
+  if (tableWrappers.length === 0) {
+    return undefined;
+  }
   tableWrappers.forEach(tableWrapper => {
     const table = tableWrapper.querySelector(':scope > table');
     if (table) {
@@ -13,12 +19,18 @@ export const getWidthInfoPayload = renderer => {
       });
     }
   });
+  const maxTableWidth = Math.max(...tablesInfo.map(table => table.tableWidth));
+  const editorWidth = renderer.scrollWidth;
   return {
     action: TABLE_ACTION.TABLE_WIDTH_INFO,
     actionSubject: ACTION_SUBJECT.TABLE,
     attributes: {
-      editorWidth: renderer.scrollWidth,
+      editorWidth,
+      editorWidthBreakpoint: getBreakpointKey(editorWidth),
       tableWidthInfo: tablesInfo,
+      maxTableWidthBreakpoint: getBreakpointKey(maxTableWidth),
+      hasTableWiderThanEditor: maxTableWidth > editorWidth,
+      hasTableWithScrollbar: tablesInfo.some(table => table.hasScrollbar),
       mode: MODE.RENDERER
     },
     eventType: EVENT_TYPE.OPERATIONAL

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.3.0";
+const packageVersion = "124.4.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -359,7 +359,10 @@ export const RendererFunctionalComponent = props => {
             var _props$innerRef, _props$innerRef$curre;
             const renderer = (_props$innerRef = props.innerRef) === null || _props$innerRef === void 0 ? void 0 : (_props$innerRef$curre = _props$innerRef.current) === null || _props$innerRef$curre === void 0 ? void 0 : _props$innerRef$curre.querySelector('.ak-renderer-document');
             if (renderer) {
-              fireAnalyticsEvent(getWidthInfoPayload(renderer));
+              const payload = getWidthInfoPayload(renderer);
+              if (payload) {
+                fireAnalyticsEvent(payload);
+              }
             }
           };
           if (window && typeof window.requestIdleCallback === 'function') {

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

@@ -110,7 +110,7 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
 
   // when table resized and number column is enabled, we need to scale down the table in render
   if (forceScaleForNumColumn) {
-    var calculatedTableContainerWidth = rendererAppearance === 'comment' && fg('platform_custom_number_column') ? sumOfColumns : tableContainerWidth;
+    var calculatedTableContainerWidth = rendererAppearance === 'comment' ? sumOfColumns : tableContainerWidth;
     var scalePercentage = +((calculatedTableContainerWidth - akEditorTableNumberColumnWidth) / calculatedTableContainerWidth);
     var targetMaxWidth = calculatedTableContainerWidth - akEditorTableNumberColumnWidth;
     var totalWidthAfterScale = 0;

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

@@ -1494,7 +1494,7 @@ var rendererAnnotationStylesCommentHeightFix = css({
 // Default: 20px emoji at 16px base font
 // Scaled: 20px * (baseFontSize/16)
 // E.g., dense mode (13px base): 20px * (13/16) = 16.25px
-var denseEmojiStyles = css(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
+var denseEmojiStyles = css(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
   maxHeight: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
@@ -1504,6 +1504,9 @@ var denseEmojiStyles = css(_defineProperty({}, ".".concat(EmojiSharedCssClassNam
     height: '100%',
     objectFit: 'contain'
   }
+}), ".".concat(RendererCssClassName.DOCUMENT, " .ak-editor-panel .ak-editor-panel__icon"), {
+  height: "var(--ds-space-250, 20px)",
+  width: "var(--ds-space-250, 20px)"
 }));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,

package/dist/esm/ui/Renderer/analytics-utils.js

@@ -1,7 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE } from '@atlaskit/editor-common/analytics';
+import { getBreakpointKey } from '@atlaskit/editor-common/utils/analytics';
 export var getWidthInfoPayload = function getWidthInfoPayload(renderer) {
   var tablesInfo = [];
   var tableWrappers = renderer.querySelectorAll('.pm-table-wrapper');
+
+  // only send the event if there are tables on the page
+  if (tableWrappers.length === 0) {
+    return undefined;
+  }
   tableWrappers.forEach(function (tableWrapper) {
     var table = tableWrapper.querySelector(':scope > table');
     if (table) {
@@ -13,12 +20,22 @@ export var getWidthInfoPayload = function getWidthInfoPayload(renderer) {
       });
     }
   });
+  var maxTableWidth = Math.max.apply(Math, _toConsumableArray(tablesInfo.map(function (table) {
+    return table.tableWidth;
+  })));
+  var editorWidth = renderer.scrollWidth;
   return {
     action: TABLE_ACTION.TABLE_WIDTH_INFO,
     actionSubject: ACTION_SUBJECT.TABLE,
     attributes: {
-      editorWidth: renderer.scrollWidth,
+      editorWidth: editorWidth,
+      editorWidthBreakpoint: getBreakpointKey(editorWidth),
       tableWidthInfo: tablesInfo,
+      maxTableWidthBreakpoint: getBreakpointKey(maxTableWidth),
+      hasTableWiderThanEditor: maxTableWidth > editorWidth,
+      hasTableWithScrollbar: tablesInfo.some(function (table) {
+        return table.hasScrollbar;
+      }),
       mode: MODE.RENDERER
     },
     eventType: EVENT_TYPE.OPERATIONAL

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.3.0";
+var packageVersion = "124.4.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -360,7 +360,10 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
             var _props$innerRef;
             var renderer = (_props$innerRef = props.innerRef) === null || _props$innerRef === void 0 || (_props$innerRef = _props$innerRef.current) === null || _props$innerRef === void 0 ? void 0 : _props$innerRef.querySelector('.ak-renderer-document');
             if (renderer) {
-              _fireAnalyticsEvent(getWidthInfoPayload(renderer));
+              var payload = getWidthInfoPayload(renderer);
+              if (payload) {
+                _fireAnalyticsEvent(payload);
+              }
             }
           };
           if (window && typeof window.requestIdleCallback === 'function') {

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

@@ -2,6 +2,7 @@ import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, Operational
 import type { AEP } from './enums';
 import type { SortOrder } from '@atlaskit/editor-common/types';
 import type { SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UnsupportedContentPayload, UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
+import type { EditorBreakpointKey } from '@atlaskit/editor-common/utils/analytics';
 export declare enum PLATFORM {
     NATIVE = "mobileNative",
     HYBRID = "mobileHybrid",
@@ -84,6 +85,10 @@ type TableSortColumnAEP = AEP<ACTION.SORT_COLUMN, ACTION_SUBJECT.TABLE, undefine
 }, EVENT_TYPE.TRACK>;
 type TableWidthInfoAEP = AEP<TABLE_ACTION.TABLE_WIDTH_INFO, ACTION_SUBJECT.TABLE, undefined, {
     editorWidth: number;
+    editorWidthBreakpoint: EditorBreakpointKey;
+    hasTableWiderThanEditor: boolean;
+    hasTableWithScrollbar: boolean;
+    maxTableWidthBreakpoint: EditorBreakpointKey;
     mode: MODE.RENDERER;
     tableWidthInfo: Array<{
         hasScrollbar: boolean;

package/dist/types/ui/Renderer/analytics-utils.d.ts

@@ -1,2 +1,2 @@
 import type { AnalyticsEventPayload } from '../../analytics/events';
-export declare const getWidthInfoPayload: (renderer: HTMLElement) => AnalyticsEventPayload;
+export declare const getWidthInfoPayload: (renderer: HTMLElement) => AnalyticsEventPayload | undefined;

package/dist/types-ts4.5/analytics/events.d.ts

@@ -2,6 +2,7 @@ import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, Operational
 import type { AEP } from './enums';
 import type { SortOrder } from '@atlaskit/editor-common/types';
 import type { SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UnsupportedContentPayload, UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
+import type { EditorBreakpointKey } from '@atlaskit/editor-common/utils/analytics';
 export declare enum PLATFORM {
     NATIVE = "mobileNative",
     HYBRID = "mobileHybrid",
@@ -84,6 +85,10 @@ type TableSortColumnAEP = AEP<ACTION.SORT_COLUMN, ACTION_SUBJECT.TABLE, undefine
 }, EVENT_TYPE.TRACK>;
 type TableWidthInfoAEP = AEP<TABLE_ACTION.TABLE_WIDTH_INFO, ACTION_SUBJECT.TABLE, undefined, {
     editorWidth: number;
+    editorWidthBreakpoint: EditorBreakpointKey;
+    hasTableWiderThanEditor: boolean;
+    hasTableWithScrollbar: boolean;
+    maxTableWidthBreakpoint: EditorBreakpointKey;
     mode: MODE.RENDERER;
     tableWidthInfo: Array<{
         hasScrollbar: boolean;

package/dist/types-ts4.5/ui/Renderer/analytics-utils.d.ts

@@ -1,2 +1,2 @@
 import type { AnalyticsEventPayload } from '../../analytics/events';
-export declare const getWidthInfoPayload: (renderer: HTMLElement) => AnalyticsEventPayload;
+export declare const getWidthInfoPayload: (renderer: HTMLElement) => AnalyticsEventPayload | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.4.0",
+	"version": "124.4.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.10.0",
+		"@atlaskit/editor-common": "^110.11.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -92,7 +92,7 @@
 		"@atlaskit/mention": "^24.3.0",
 		"@atlaskit/modal-dialog": "^14.5.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
-		"@atlaskit/profilecard": "^24.18.0",
+		"@atlaskit/profilecard": "^24.19.0",
 		"@atlaskit/util-data-test": "^18.3.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
@@ -206,9 +206,6 @@
 		"platform_editor_renderer_rm_usespecbasedvalidator": {
 			"type": "boolean"
 		},
-		"platform_editor_add_border_for_nested_panel": {
-			"type": "boolean"
-		},
 		"platform_editor_bordered_panel_nested_in_table": {
 			"type": "boolean"
 		},
@@ -236,9 +233,6 @@
 		"platform_table_number_column": {
 			"type": "boolean"
 		},
-		"platform_custom_number_column": {
-			"type": "boolean"
-		},
 		"platform_editor_numbered_column_in_include": {
 			"type": "boolean"
 		},