@atlaskit/renderer 118.1.0 → 118.1.2

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

@@ -12,30 +12,17 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/enforce-style-prop */
 import React from 'react';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { FullPagePadding } from '../../ui/Renderer/style';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TableHeader } from './tableCell';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { isCommentAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-var getResizerMinWidth = function getResizerMinWidth(node) {
-  var currentColumnCount = getColgroupChildrenLength(node);
-  var minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
-  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
-  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
-  return minColumnWidth + 1;
-};
-var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
-  var map = TableMap.get(table);
-  return map.width;
-};
-var gutterPadding = akEditorGutterPaddingDynamic() * 2;
-var TABLE_MAX_WIDTH = 1800;
-var COLUMN_MIN_WIDTH = 48;
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
     exposure: true
@@ -127,6 +114,9 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
 export var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * TableContainer renders tables using only CSS-based rules
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -253,7 +243,12 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(TableContainer, _React$Component);
   return _createClass(TableContainer, [{
     key: "componentDidMount",
-    value: function componentDidMount() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function componentDidMount() {
       this.resizeObserver = new ResizeObserver(this.applyResizerChange);
       if (this.wrapperRef.current) {
         this.resizeObserver.observe(this.wrapperRef.current);
@@ -272,6 +267,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
       }
     }
+
+    /**
+     *
+     * @param prevProps
+     * @param prevState
+     * @example
+     */
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -298,12 +300,20 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "pinTop",
-    get: function get() {
+    get:
+    /**
+     *
+     */
+    function get() {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
         return;
       }
       return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
     }
+
+    /**
+     *
+     */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
     get: function get() {
@@ -313,6 +323,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // THEN we should add the OverflowParent offset top (RETURN TRUE)
       return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
     }
+
+    /**
+     *
+     */
   }, {
     key: "stickyTop",
     get: function get() {
@@ -331,6 +345,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
+
+    /**
+     *
+     * @example
+     */
   }, {
     key: "render",
     value: function render() {
@@ -345,92 +364,92 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
+        allowTableAlignment = _this$props.allowTableAlignment,
         allowTableResizing = _this$props.allowTableResizing,
         isPresentational = _this$props.isPresentational;
       var stickyMode = this.state.stickyMode;
-      var getTableWidthAttribute = function getTableWidthAttribute() {
-        // this scenario occurs when there is a full width table within the full width renderer,
-        // in which case the parent container is already the correct size
-        if (rendererAppearance === 'full-width' && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH) {
-          return "100%";
+      var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
+      var updatedLayout;
+      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
+      var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
+        if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+          return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+        } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+          return renderWidthCSS;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = getTableContainerWidth(tableNode);
+          return "min(".concat(tableContainerWidth, "px, ").concat(renderWidthCSS, ")");
         }
-        // this scenario occurs when there is a full width table nested within a component (expand, column layout). In these cases
-        // the table should inherit the width of its parent component
-        if (rendererAppearance === 'full-page' && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH && layout === 'align-start') {
-          return "100%";
-        }
-        return "".concat(tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width, "px");
       };
-      var tableWidthAttribute = getTableWidthAttribute();
-      var children = React.Children.toArray(this.props.children);
-      var tableMinWidth;
-      if (tableNode) {
-        tableMinWidth = getResizerMinWidth(tableNode);
+      var tableWidthCSS = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+
+      // Logic for table alignment in renderer
+      var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
+      var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+      var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var tableWidthNew = getTableContainerWidth(tableNode);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var leftCSS;
+      if (shouldCalculateLeftForAlignment) {
+        leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
+      }
+      if (!shouldCalculateLeftForAlignment && isFullPageAppearance(rendererAppearance)) {
+        // Note tableWidthCSS here is the renderer width
+        // When the screen is super wide we want table to break out.
+        // However if screen is smaller than 760px. We want table align to left.
+        leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
       }
+      var children = React.Children.toArray(this.props.children);
 
       // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
       // This check caters for those tables and helps with SSR logic
-      var isFullWidth = rendererAppearance === 'full-width' && layout !== 'full-width';
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
       if (isFullWidth) {
-        this.updatedLayout = 'full-width';
+        updatedLayout = 'full-width';
         // if table has width explicity set, ensure SSR is handled
       } else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
-        this.updatedLayout = 'custom';
+        updatedLayout = 'custom';
       } else {
-        this.updatedLayout = layout;
+        updatedLayout = layout;
       }
+      var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
 
-      // defined in colgroup.tsx:
-      // appearance == comment && allowTableResizing && means it is a comment
-      // appearance == comment && !allowTableResizing && means it is a inline comment
-      // for inline comments, the table should inherit the width of the parent component rather than maintain its own size
-      var isInsideInlineComment = rendererAppearance === 'comment' && !allowTableResizing;
-
-      // These styling removes extra padding for `comment` rendererAppearance.
-      // This is especially relevant for Jira which only uses `comment` appearance and does not need padding.
-      var resizerContainerPadding = rendererAppearance === 'comment' ? 0 : gutterPadding;
-      var resizerItemMaxWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
-      var resizerItemWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
+      // We can only use CSS to determine the width when we have a known width in container.
+      // When appearance is full-page, full-width or comment we use CSS based width calculation.
+      // Otherwise it's fixed table width (customized width) or inherit.
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width') {
+        finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
+        // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
+        // it is most likely a table created before "Support Table in Comments" FF was enabled
+        // and we would see a bug ED-24795. A table created before "Support Table in Comments",
+        // should inhirit the width of the renderer container.
 
-      // full width tables can have either left-aligned or centered layout despite looking centered in the renderer.
-      // in these cases, keep the alignment unset
-      var getTableAlignment = function getTableAlignment() {
-        return isFullWidth && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH ? '' : tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
+        // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
+        // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
+        // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
+        // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
+        // instead of 760 that was set on tableNode when the table had been published.
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      var style = {
+        width: finalTableContainerWidth,
+        left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+        marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
       };
-      return /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "table-alignment-container"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        ,
-        style: {
-          display: 'flex',
-          justifyContent: getTableAlignment()
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "pm-table-resizer-container"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        ,
-        style: {
-          width: isInsideInlineComment ? '100%' : "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "resizer-item display-handle",
-        style: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-          position: 'relative',
-          userSelect: 'auto',
-          boxSizing: 'border-box'
-        }, '--ak-editor-table-gutter-padding', "".concat(gutterPadding, "px")), '--ak-editor-table-max-width', "".concat(TABLE_MAX_WIDTH, "px")), '--ak-editor-table-min-width', "".concat(tableMinWidth, "px")), "minWidth", 'var(--ak-editor-table-min-width)'), "maxWidth", resizerItemMaxWidth), "width", resizerItemWidth)
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "resizer-hover-zone"
-      }, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": this.updatedLayout,
+        "data-layout": updatedLayout,
         "data-testid": "table-container",
-        ref: this.props.handleRef
+        ref: this.props.handleRef,
+        style: style
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -438,8 +457,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: 0,
         tableWidth: "inherit",
+        renderWidth: 0,
         layout: layout,
         handleRef: this.props.handleRef,
         shadowClassNames: this.props.shadowClassNames,
@@ -451,7 +470,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
-        allowTableResizing: allowTableResizing
+        allowTableResizing: allowTableResizing,
+        fixTableSSRResizing: true
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -467,8 +487,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         innerRef: this.tableRef,
         columnWidths: columnWidths,
         layout: layout,
-        isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: 0,
+        isNumberColumnEnabled: isNumberColumnEnabled,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
@@ -502,10 +522,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }))))));
+      })));
     }
   }]);
 }(React.Component);
+/**
+ *
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
@@ -556,7 +579,12 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
   _inherits(TableProcessorWithContainerStyles, _React$Component2);
   return _createClass(TableProcessorWithContainerStyles, [{
     key: "render",
-    value: function render() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function render() {
       var children = this.props.children;
       if (!children) {
         return null;

package/dist/esm/react/utils/EditorMediaClientProvider.js

@@ -1,8 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
-import { useProviderLayout, useProvider } from '@atlaskit/editor-common/provider-factory';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { useProviderLayout } from '@atlaskit/editor-common/provider-factory';
 export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
   var children = _ref.children,
     ssr = _ref.ssr;
@@ -10,14 +9,13 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     _useState2 = _slicedToArray(_useState, 2),
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
-  var oldMediaProvider = useProvider('mediaProvider');
   var mediaProvider = useProviderLayout('mediaProvider');
 
   /**
    * If a mediaClientConfig is provided then we will force
    * skip the mediaClient from context
    */
-  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || oldMediaProvider || mediaProvider);
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   var contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -31,26 +29,14 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
   // by not providing both SSR config and mediaProvider,
   // and provide a top level mediaClient context
   // This is useful for testing and creating examples.
-  useEffect(function () {
-    if (!fg('platform_editor_speedup_media_client')) {
-      if (ssr !== null && ssr !== void 0 && ssr.config) {
-        setMediaClientConfig(ssr.config);
-      } else if (oldMediaProvider) {
-        oldMediaProvider.then(function (provider) {
-          setMediaClientConfig(provider.viewMediaClientConfig);
-        });
-      }
-    }
-  }, [oldMediaProvider, ssr]);
+
   useLayoutEffect(function () {
-    if (fg('platform_editor_speedup_media_client')) {
-      if (ssr !== null && ssr !== void 0 && ssr.config) {
-        setMediaClientConfig(ssr.config);
-      } else if (mediaProvider) {
-        mediaProvider.then(function (provider) {
-          setMediaClientConfig(provider.viewMediaClientConfig);
-        });
-      }
+    if (ssr !== null && ssr !== void 0 && ssr.config) {
+      setMediaClientConfig(ssr.config);
+    } else if (mediaProvider) {
+      mediaProvider.then(function (provider) {
+        setMediaClientConfig(provider.viewMediaClientConfig);
+      });
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.1.0";
+var packageVersion = "118.1.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -462,15 +462,9 @@ var getRendererComponent = function getRendererComponent(nodeComponents) {
   // and use context instead because at this time we cannot guarantee that existing
   // consumers of Atlaskit Renderer will update to use the new portal context.
   if (!Boolean(nodeComponents) && fg('cc_complexit_reduce_portal_rerenders')) {
-    if (fg('cc_perf_reduce_rerenders')) {
-      return RendererFunctionalComponentWithPortalContextMemoized;
-    }
-    return RendererFunctionalComponentWithPortalContext;
-  }
-  if (fg('cc_perf_reduce_rerenders')) {
-    return RendererFunctionalComponentMemoized;
+    return RendererFunctionalComponentWithPortalContextMemoized;
   }
-  return RendererFunctionalComponent;
+  return RendererFunctionalComponentMemoized;
 };
 
 /**

package/dist/esm/ui/annotations/element/mark.js

@@ -14,7 +14,6 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl-next';
 import { inlineCommentMessages } from '../../../messages';
-import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 var markStyles = css(_defineProperty({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -123,20 +122,6 @@ export var MarkComponent = function MarkComponent(_ref) {
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
-  var _useAnnotationManager = useAnnotationManagerDispatch(),
-    dispatch = _useAnnotationManager.dispatch;
-  var _useAnnotationManager2 = useAnnotationManagerState(),
-    currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
-  var markRef = useCallback(function (node) {
-    if (id === currentSelectedAnnotationId && node) {
-      dispatch({
-        type: 'setSelectedMarkRef',
-        data: {
-          markRef: node
-        }
-      });
-    }
-  }, [dispatch, id, currentSelectedAnnotationId]);
   var onMarkClick = useCallback(function (event) {
     // prevent inline mark logic for media block marks
     if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
@@ -163,13 +148,22 @@ export var MarkComponent = function MarkComponent(_ref) {
       // prevents from opening link URL inside webView in Safari
       event.preventDefault();
     }
-
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    onClick({
-      eventTarget: event.target,
-      annotationIds: annotationIds
-    });
+    if (fg('platform_editor_comments_api_manager')) {
+      // currentTarget is the right element if there are multiple overlapping annotations
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      onClick({
+        eventTarget: event.currentTarget,
+        annotationIds: annotationIds
+      });
+    } else {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      onClick({
+        eventTarget: event.target,
+        annotationIds: annotationIds
+      });
+    }
   }, [annotationIds, onClick, state]);
   var onMarkEnter = function onMarkEnter(evt) {
     var _document$activeEleme;
@@ -195,7 +189,6 @@ export var MarkComponent = function MarkComponent(_ref) {
     'aria-details': annotationIds.join(', ')
   }, desktopAccessibilityAttributes);
   return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
-    ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id
   }, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
     css: [markStyles, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesWithCommentsPanel, !isMobile() && accessibilityStyles, markStylesWithUpdatedShadow],

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -194,7 +194,7 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
     }
   }, [updateSubscriber, createAnalyticsEvent, isNestedRender]);
   if (fg('platform_editor_comments_api_manager')) {
-    return selectedAnnotation;
+    return isNestedRender ? null : selectedAnnotation;
   } else {
     return annotationClickEvent;
   }

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

@@ -4,6 +4,7 @@ type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
     isPresentational?: boolean;
+    fixTableSSRResizing?: boolean;
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, isInsideOfTable, isinsideMultiBodiedExtension, allowTableResizing, isPresentational, }: TableProps) => React.JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, isInsideOfTable, isinsideMultiBodiedExtension, allowTableResizing, isPresentational, fixTableSSRResizing, }: TableProps) => React.JSX.Element>;
 export {};

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

@@ -42,7 +42,7 @@ export interface TableState {
     headerRowHeight: number;
 }
 /**
- * Class for Tables in Renderer
+ *
  */
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;

package/dist/types/react/nodes/tableNew.d.ts

@@ -42,6 +42,9 @@ export interface TableState {
     wrapperWidth: number;
     headerRowHeight: number;
 }
+/**
+ * TableContainer renders tables using only CSS-based rules
+ */
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;
     tableRef: React.RefObject<HTMLTableElement>;
@@ -55,26 +58,56 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     updatedLayout: TableLayout | 'custom';
     private resizeObserver;
     private applyResizerChange;
+    /**
+     *
+     * @example
+     */
     componentDidMount(): void;
+    /**
+     *
+     * @param prevProps
+     * @param prevState
+     * @example
+     */
     componentDidUpdate(prevProps: TableProps, prevState: TableState): void;
     componentWillUnmount: () => void;
     getScrollTop: () => number;
     updateSticky: () => void;
     onScroll: () => void;
     onWrapperScrolled: () => void;
+    /**
+     *
+     */
     get pinTop(): number | undefined;
+    /**
+     *
+     */
     get shouldAddOverflowParentOffsetTop_DO_NOT_USE(): boolean | null | undefined;
+    /**
+     *
+     */
     get stickyTop(): number | undefined;
+    /**
+     *
+     * @example
+     */
     render(): React.JSX.Element;
     private grabFirstRowRef;
 }
 type TableProcessorState = {
     tableOrderStatus?: TableOrderStatus;
 };
+/**
+ *
+ */
 export declare class TableProcessorWithContainerStyles extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableProcessorState> {
     state: {
         tableOrderStatus: undefined;
     };
+    /**
+     *
+     * @example
+     */
     render(): React.JSX.Element | null;
     private addSortableColumn;
     private changeSortOrder;

package/dist/types/ui/annotations/element/mark.d.ts

@@ -27,7 +27,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -42,7 +41,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -60,7 +58,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -80,7 +77,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -98,7 +94,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -118,7 +113,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 }, string | React.JSXElementConstructor<any>>;
 export {};

package/dist/types-ts4.5/react/nodes/table/table.d.ts

@@ -4,6 +4,7 @@ type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
     isPresentational?: boolean;
+    fixTableSSRResizing?: boolean;
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, isInsideOfTable, isinsideMultiBodiedExtension, allowTableResizing, isPresentational, }: TableProps) => React.JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, isInsideOfTable, isinsideMultiBodiedExtension, allowTableResizing, isPresentational, fixTableSSRResizing, }: TableProps) => React.JSX.Element>;
 export {};