@atlaskit/renderer 136.2.0 → 136.2.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/renderer
 
+## 136.2.2
+
+### Patch Changes
+
+- [`e2be8a7b1a21b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2be8a7b1a21b) -
+  Under experiment `platform_editor_adf_validator_perf`, `validationOverrides` (including the
+  `allowTableInPanel` override) is built in a single `useMemo` instead of a fresh object literal per
+  render. The unstable reference made `renderDocument`'s validation memo miss, re-validating an
+  unchanged document on every render. Added a test asserting the reference stays stable across
+  re-renders.
+
+  `RendererFunctionalComponent` now takes an `allowNestedTables` boolean in place of the
+  `validationOverrides` object prop, and derives the overrides itself.
+
+- Updated dependencies
+
+## 136.2.1
+
+### Patch Changes
+
+- [`de41cde76539d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de41cde76539d) -
+  [ux] EDITOR-8647 fix sticky header mask for rounded table in panel
+
 ## 136.2.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/panel-compiled.compiled.css

@@ -6,6 +6,7 @@
 ._13n84jg8.ak-editor-panel{align-items:normal}
 ._1554u2gc.ak-editor-panel{padding-top:var(--ds-space-100,8px)}
 ._15sp1vk5.ak-editor-panel[data-panel-type=error]{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
+._18hz1vk5.ak-editor-panel[data-panel-type=error]{--ak-renderer-panel-bg-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
 ._18w0h2mm.ak-editor-panel{position:relative}
 ._18y8qm1h.ak-editor-panel[data-panel-type=note] .ak-editor-panel__icon{color:var(--ds-icon-discovery,#af59e1)}
 ._19agidpf.ak-editor-panel .ak-editor-panel__content{flex-shrink:0}
@@ -37,18 +38,24 @@
 ._66ohu2gc.ak-editor-panel{padding-left:var(--ds-space-100,8px)}
 ._6qwr1hna.ak-editor-panel{word-break:break-word}
 ._7c6p1t9x.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image{vertical-align:var(--_1glv3p1)}
+._93eu1aok.ak-editor-panel[data-panel-type=custom]{--ak-renderer-panel-bg-color:var(--ak-renderer-panel-custom-bg-color)}
 ._9dunutpp.ak-editor-panel__no-icon{padding-left:var(--ds-space-150,9pt)}
+._a9e5p2ly.ak-editor-panel[data-panel-type=note]{--ak-renderer-panel-bg-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._e5ovn729.ak-editor-panel[data-panel-type=tip]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._eba1ibhp.ak-editor-panel[data-panel-type=warning]{--ak-renderer-panel-bg-color:var(--ds-background-accent-yellow-subtlest,#fef7c8)}
 ._fc9iidpf.ak-editor-panel .ak-editor-panel__content{min-width:0}
 ._g8a34pcx.ak-editor-panel[data-panel-type=tip] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._gb1eidpf.ak-editor-panel .ak-editor-panel__content{margin-left:0}
+._giv8n729.ak-editor-panel[data-panel-type=success]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._gt7x4pcx.ak-editor-panel[data-panel-type=success] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._iqv91kw7.ak-editor-panel{color:inherit}
 ._jde2v77o.ak-editor-panel .ak-editor-panel__content{margin-top:var(--ds-space-025,2px)}
+._niep1s93.ak-editor-panel{--ak-renderer-panel-bg-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
 ._nlelp2ly.ak-editor-panel[data-panel-type=note]{background-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._pzbautpp.ak-editor-panel__no-icon{padding-right:var(--ds-space-150,9pt)}
 ._s4ldn729.ak-editor-panel[data-panel-type=success]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._ujht1s93.ak-editor-panel{background-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
+._vy90n729.ak-editor-panel[data-panel-type=tip]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._wz94glyw.ak-editor-panel .ak-editor-panel__icon{-moz-user-select:none}
 ._zs6jglyw.ak-editor-panel .ak-editor-panel__icon{-webkit-user-select:none}
 @-moz-document url-prefix(){._udsa1o8l.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image img{display:inline-block}}

package/dist/cjs/react/nodes/panel-compiled.js

@@ -33,6 +33,7 @@ var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 var blockNodesVerticalMargin = '0.75rem';
 var akEditorTableCellMinWidth = 48;
 var panelBaseStyles = null;
+var panelBackgroundColorVariableStyles = null;
 var panelHasNoIconStyles = null;
 var panelInfoIconStyles = null;
 var panelNestedIconStyles = null;
@@ -47,7 +48,7 @@ var PanelStyledCompiled = exports.PanelStyledCompiled = function PanelStyledComp
   var customBackgroundColor = backgroundColor ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : undefined;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- intentional: preserve existing PanelSharedCssClassName.prefix class
-    className: (0, _runtime.ax)(["_lklzfajl _imyb1bbz _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3jmsf _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hauowts _7c6p1t9x _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
+    className: (0, _runtime.ax)(["_lklzfajl _imyb1bbz _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3jmsf _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hauowts _7c6p1t9x _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_3') && "_niep1s93 _a9e5p2ly _giv8n729 _vy90n729 _eba1ibhp _18hz1vk5 _93eu1aok", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
     style: _objectSpread(_objectSpread({}, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- intentional: custom panel background is dynamic via CSS variable
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor

package/dist/cjs/react/nodes/panel-emotion.js

@@ -135,6 +135,32 @@ var panelBaseStyles = (0, _react2.css)({
     }
   }
 });
+var panelBackgroundColorVariableStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    '--ak-renderer-panel-bg-color': "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-purple-subtlest, #F8EEFE)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="tip"], &[data-panel-type="success"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="warning"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-yellow-subtlest, #FEF7C8)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="error"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-red-subtlest, #FFECEB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      '--ak-renderer-panel-bg-color': 'var(--ak-renderer-panel-custom-bg-color)'
+    }
+  }
+});
 var panelHasNoIconStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '&.ak-editor-panel': {
@@ -187,7 +213,7 @@ var PanelStyledEmotion = exports.PanelStyledEmotion = function PanelStyledEmotio
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
+    css: [panelBaseStyles, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_3') && panelBackgroundColorVariableStyles, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

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

@@ -13,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
@@ -41,6 +42,17 @@ var suppressExternalStickStyles = (0, _react2.css)({
     background: "var(--ds-surface, #FFFFFF)"
   }
 });
+var panelAwareStickyTableStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")
+  }
+}, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  tr: {
+    background: "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")
+  }
+}), "borderTopColor", "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")), "background", "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface-overlay, #FFFFFF)", ")")));
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
@@ -81,7 +93,7 @@ var FixedTableDiv = function FixedTableDiv(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) && (0, _fg.fg)('platform_editor_nest_table_in_panel_patch_3') && panelAwareStickyTableStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),

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

@@ -24,6 +24,7 @@ var _measureRender = require("@atlaskit/editor-common/performance/measure-render
 var _navigation = require("@atlaskit/editor-common/performance/navigation");
 var _useScrollToBlock = require("../hooks/useScrollToBlock");
 var _utils = require("@atlaskit/editor-common/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("@atlaskit/analytics-listeners/types");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -73,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.1.7";
+var packageVersion = "136.2.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -473,13 +474,24 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   var isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && (0, _expValEquals.expValEquals)('platform_renderer_collapsible_headings', 'isEnabled', true);
   (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document, props.scrollToBlock);
+  var allowNestedTables = props.allowNestedTables;
+  var stableValidationOverrides = (0, _react.useMemo)(function () {
+    var schema = getSchema(props.schema, props.adfStage);
+    return (0, _nesting.isPanelNestingTableSupported)(schema) ? {
+      allowNestedTables: allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables: allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  var validationOverrides = stableValidationOverrides.allowTableInPanel && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_adf_validator_perf') ? _objectSpread({}, stableValidationOverrides) : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var allowTableInPanel = (0, _nesting.isPanelNestingTableSupported)(schema);
-    var validationOverrides = allowTableInPanel ? _objectSpread(_objectSpread({}, props.validationOverrides), {}, {
-      allowTableInPanel: true
-    }) : props.validationOverrides;
     var _renderDocument = (0, _.renderDocument)(props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation, validationOverrides),
       result = _renderDocument.result,
       stat = _renderDocument.stat,
@@ -595,11 +607,6 @@ function Renderer(props) {
   var _ref = (0, _react.useContext)(_ValidationContext.ValidationContext) || {},
     skipValidation = _ref.skipValidation,
     allowNestedTables = _ref.allowNestedTables;
-  var validationOverrides = (0, _react.useMemo)(function () {
-    return {
-      allowNestedTables: allowNestedTables
-    };
-  }, [allowNestedTables]);
   return (0, _react2.jsx)(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -607,7 +614,7 @@ function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

package/dist/es2019/react/nodes/panel-compiled.compiled.css

@@ -5,6 +5,7 @@
 ._13n84jg8.ak-editor-panel{align-items:normal}
 ._1554u2gc.ak-editor-panel{padding-top:var(--ds-space-100,8px)}
 ._15sp1vk5.ak-editor-panel[data-panel-type=error]{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
+._18hz1vk5.ak-editor-panel[data-panel-type=error]{--ak-renderer-panel-bg-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
 ._18w0h2mm.ak-editor-panel{position:relative}
 ._18y8qm1h.ak-editor-panel[data-panel-type=note] .ak-editor-panel__icon{color:var(--ds-icon-discovery,#af59e1)}
 ._19agidpf.ak-editor-panel .ak-editor-panel__content{flex-shrink:0}
@@ -38,19 +39,25 @@
 ._66ohu2gc.ak-editor-panel{padding-left:var(--ds-space-100,8px)}
 ._6qwr1hna.ak-editor-panel{word-break:break-word}
 ._7c6pj39m.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image{vertical-align:-3px}
+._93eu1aok.ak-editor-panel[data-panel-type=custom]{--ak-renderer-panel-bg-color:var(--ak-renderer-panel-custom-bg-color)}
 ._9dunutpp.ak-editor-panel__no-icon{padding-left:var(--ds-space-150,9pt)}
+._a9e5p2ly.ak-editor-panel[data-panel-type=note]{--ak-renderer-panel-bg-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._e5ovn729.ak-editor-panel[data-panel-type=tip]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._eba1ibhp.ak-editor-panel[data-panel-type=warning]{--ak-renderer-panel-bg-color:var(--ds-background-accent-yellow-subtlest,#fef7c8)}
 ._fc9iidpf.ak-editor-panel .ak-editor-panel__content{min-width:0}
 ._g8a34pcx.ak-editor-panel[data-panel-type=tip] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._gb1eidpf.ak-editor-panel .ak-editor-panel__content{margin-left:0}
+._giv8n729.ak-editor-panel[data-panel-type=success]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._gt7x4pcx.ak-editor-panel[data-panel-type=success] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._iqv91kw7.ak-editor-panel{color:inherit}
 ._jde2v77o.ak-editor-panel .ak-editor-panel__content{margin-top:var(--ds-space-025,2px)}
+._niep1s93.ak-editor-panel{--ak-renderer-panel-bg-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
 ._nlelp2ly.ak-editor-panel[data-panel-type=note]{background-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._pzbautpp.ak-editor-panel__no-icon{padding-right:var(--ds-space-150,9pt)}
 ._s4ldn729.ak-editor-panel[data-panel-type=success]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._u70eidpf.ak-editor-panel{margin-bottom:0}
 ._ujht1s93.ak-editor-panel{background-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
+._vy90n729.ak-editor-panel[data-panel-type=tip]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._wz94glyw.ak-editor-panel .ak-editor-panel__icon{-moz-user-select:none}
 ._xmo1idpf.ak-editor-panel{margin-right:0}
 ._zs6jglyw.ak-editor-panel .ak-editor-panel__icon{-webkit-user-select:none}

package/dist/es2019/react/nodes/panel-compiled.js

@@ -21,6 +21,7 @@ const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 const blockNodesVerticalMargin = '0.75rem';
 const akEditorTableCellMinWidth = 48;
 const panelBaseStyles = null;
+const panelBackgroundColorVariableStyles = null;
 const panelHasNoIconStyles = null;
 const panelInfoIconStyles = null;
 const panelNestedIconStyles = null;
@@ -36,7 +37,7 @@ export const PanelStyledCompiled = ({
   const customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- intentional: preserve existing PanelSharedCssClassName.prefix class
-    className: ax(["_lklzfajl _1alzoqnp _xmo1idpf _u70eidpf _1m1jidpf _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3ckbl _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hau12gs _7c6pj39m _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
+    className: ax(["_lklzfajl _1alzoqnp _xmo1idpf _u70eidpf _1m1jidpf _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3ckbl _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hau12gs _7c6pj39m _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && "_niep1s93 _a9e5p2ly _giv8n729 _vy90n729 _eba1ibhp _18hz1vk5 _93eu1aok", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- intentional: custom panel background is dynamic via CSS variable
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor

package/dist/es2019/react/nodes/panel-emotion.js

@@ -127,6 +127,32 @@ const panelBaseStyles = css({
     }
   }
 });
+const panelBackgroundColorVariableStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    '--ak-renderer-panel-bg-color': "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-purple-subtlest, #F8EEFE)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="tip"], &[data-panel-type="success"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="warning"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-yellow-subtlest, #FEF7C8)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="error"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-red-subtlest, #FFECEB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      '--ak-renderer-panel-bg-color': 'var(--ak-renderer-panel-custom-bg-color)'
+    }
+  }
+});
 const panelHasNoIconStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '&.ak-editor-panel': {
@@ -180,7 +206,7 @@ export const PanelStyledEmotion = ({
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
+    css: [panelBaseStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && panelBackgroundColorVariableStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
@@ -29,6 +30,21 @@ const suppressExternalStickStyles = css({
     background: "var(--ds-surface, #FFFFFF)"
   }
 });
+const panelAwareStickyTableStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: `var(--ak-renderer-panel-bg-color, ${"var(--ds-surface, #FFFFFF)"})`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    tr: {
+      background: `var(--ak-renderer-panel-bg-color, ${"var(--ds-surface, #FFFFFF)"})`
+    }
+  },
+  borderTopColor: `var(--ak-renderer-panel-bg-color, ${"var(--ds-surface, #FFFFFF)"})`,
+  background: `var(--ak-renderer-panel-bg-color, ${"var(--ds-surface-overlay, #FFFFFF)"})`
+});
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
@@ -82,7 +98,7 @@ const FixedTableDiv = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && panelAwareStickyTableStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: `${wrapperWidth}px`,

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

@@ -18,6 +18,7 @@ import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { useScrollToBlock } from '../hooks/useScrollToBlock';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -59,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "136.1.7";
+const packageVersion = "136.2.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -462,14 +463,28 @@ export const RendererFunctionalComponent = props => {
   }), [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   const isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
+  const {
+    allowNestedTables
+  } = props;
+  const stableValidationOverrides = useMemo(() => {
+    const schema = getSchema(props.schema, props.adfStage);
+    return isPanelNestingTableSupported(schema) ? {
+      allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  const validationOverrides = stableValidationOverrides.allowTableInPanel && !isExperimentEnabled('platform_editor_adf_validator_perf') ? {
+    ...stableValidationOverrides
+  } : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     const schema = getSchema(props.schema, props.adfStage);
-    const allowTableInPanel = isPanelNestingTableSupported(schema);
-    const validationOverrides = allowTableInPanel ? {
-      ...props.validationOverrides,
-      allowTableInPanel: true
-    } : props.validationOverrides;
     const {
       result,
       stat,
@@ -585,9 +600,6 @@ export function Renderer(props) {
     skipValidation,
     allowNestedTables
   } = useContext(ValidationContext) || {};
-  const validationOverrides = useMemo(() => ({
-    allowNestedTables
-  }), [allowNestedTables]);
   return jsx(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -595,7 +607,7 @@ export function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

package/dist/esm/react/nodes/panel-compiled.compiled.css

@@ -6,6 +6,7 @@
 ._13n84jg8.ak-editor-panel{align-items:normal}
 ._1554u2gc.ak-editor-panel{padding-top:var(--ds-space-100,8px)}
 ._15sp1vk5.ak-editor-panel[data-panel-type=error]{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
+._18hz1vk5.ak-editor-panel[data-panel-type=error]{--ak-renderer-panel-bg-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
 ._18w0h2mm.ak-editor-panel{position:relative}
 ._18y8qm1h.ak-editor-panel[data-panel-type=note] .ak-editor-panel__icon{color:var(--ds-icon-discovery,#af59e1)}
 ._19agidpf.ak-editor-panel .ak-editor-panel__content{flex-shrink:0}
@@ -37,18 +38,24 @@
 ._66ohu2gc.ak-editor-panel{padding-left:var(--ds-space-100,8px)}
 ._6qwr1hna.ak-editor-panel{word-break:break-word}
 ._7c6p1t9x.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image{vertical-align:var(--_1glv3p1)}
+._93eu1aok.ak-editor-panel[data-panel-type=custom]{--ak-renderer-panel-bg-color:var(--ak-renderer-panel-custom-bg-color)}
 ._9dunutpp.ak-editor-panel__no-icon{padding-left:var(--ds-space-150,9pt)}
+._a9e5p2ly.ak-editor-panel[data-panel-type=note]{--ak-renderer-panel-bg-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._e5ovn729.ak-editor-panel[data-panel-type=tip]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._eba1ibhp.ak-editor-panel[data-panel-type=warning]{--ak-renderer-panel-bg-color:var(--ds-background-accent-yellow-subtlest,#fef7c8)}
 ._fc9iidpf.ak-editor-panel .ak-editor-panel__content{min-width:0}
 ._g8a34pcx.ak-editor-panel[data-panel-type=tip] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._gb1eidpf.ak-editor-panel .ak-editor-panel__content{margin-left:0}
+._giv8n729.ak-editor-panel[data-panel-type=success]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._gt7x4pcx.ak-editor-panel[data-panel-type=success] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
 ._iqv91kw7.ak-editor-panel{color:inherit}
 ._jde2v77o.ak-editor-panel .ak-editor-panel__content{margin-top:var(--ds-space-025,2px)}
+._niep1s93.ak-editor-panel{--ak-renderer-panel-bg-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
 ._nlelp2ly.ak-editor-panel[data-panel-type=note]{background-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
 ._pzbautpp.ak-editor-panel__no-icon{padding-right:var(--ds-space-150,9pt)}
 ._s4ldn729.ak-editor-panel[data-panel-type=success]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._ujht1s93.ak-editor-panel{background-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
+._vy90n729.ak-editor-panel[data-panel-type=tip]{--ak-renderer-panel-bg-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
 ._wz94glyw.ak-editor-panel .ak-editor-panel__icon{-moz-user-select:none}
 ._zs6jglyw.ak-editor-panel .ak-editor-panel__icon{-webkit-user-select:none}
 @-moz-document url-prefix(){._udsa1o8l.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image img{display:inline-block}}

package/dist/esm/react/nodes/panel-compiled.js

@@ -26,6 +26,7 @@ var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 var blockNodesVerticalMargin = '0.75rem';
 var akEditorTableCellMinWidth = 48;
 var panelBaseStyles = null;
+var panelBackgroundColorVariableStyles = null;
 var panelHasNoIconStyles = null;
 var panelInfoIconStyles = null;
 var panelNestedIconStyles = null;
@@ -40,7 +41,7 @@ var PanelStyledCompiled = function PanelStyledCompiled(_ref) {
   var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- intentional: preserve existing PanelSharedCssClassName.prefix class
-    className: ax(["_lklzfajl _imyb1bbz _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3jmsf _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hauowts _7c6p1t9x _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
+    className: ax(["_lklzfajl _imyb1bbz _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3jmsf _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hauowts _7c6p1t9x _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && "_niep1s93 _a9e5p2ly _giv8n729 _vy90n729 _eba1ibhp _18hz1vk5 _93eu1aok", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && "_19mdyhbg", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && "_122m1aok", "_9dunutpp _pzbautpp", "_1wvnia51", className]),
     style: _objectSpread(_objectSpread({}, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- intentional: custom panel background is dynamic via CSS variable
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor

package/dist/esm/react/nodes/panel-emotion.js

@@ -129,6 +129,32 @@ var panelBaseStyles = css({
     }
   }
 });
+var panelBackgroundColorVariableStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    '--ak-renderer-panel-bg-color': "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-purple-subtlest, #F8EEFE)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="tip"], &[data-panel-type="success"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="warning"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-yellow-subtlest, #FEF7C8)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="error"]': {
+      '--ak-renderer-panel-bg-color': "var(--ds-background-accent-red-subtlest, #FFECEB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      '--ak-renderer-panel-bg-color': 'var(--ak-renderer-panel-custom-bg-color)'
+    }
+  }
+});
 var panelHasNoIconStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '&.ak-editor-panel': {
@@ -181,7 +207,7 @@ var PanelStyledEmotion = function PanelStyledEmotion(_ref) {
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
+    css: [panelBaseStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && panelBackgroundColorVariableStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_2') && panelInfoIconStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

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

@@ -11,6 +11,7 @@ import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
@@ -32,6 +33,17 @@ var suppressExternalStickStyles = css({
     background: "var(--ds-surface, #FFFFFF)"
   }
 });
+var panelAwareStickyTableStyles = css(_defineProperty(_defineProperty(_defineProperty({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")
+  }
+}, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  tr: {
+    background: "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")
+  }
+}), "borderTopColor", "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface, #FFFFFF)", ")")), "background", "var(--ak-renderer-panel-bg-color, ".concat("var(--ds-surface-overlay, #FFFFFF)", ")")));
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
@@ -72,7 +84,7 @@ var FixedTableDiv = function FixedTableDiv(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) && fg('platform_editor_nest_table_in_panel_patch_3') && panelAwareStickyTableStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),

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

@@ -23,6 +23,7 @@ import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { useScrollToBlock } from '../hooks/useScrollToBlock';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -64,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.1.7";
+var packageVersion = "136.2.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -464,13 +465,24 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   var isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
+  var allowNestedTables = props.allowNestedTables;
+  var stableValidationOverrides = useMemo(function () {
+    var schema = getSchema(props.schema, props.adfStage);
+    return isPanelNestingTableSupported(schema) ? {
+      allowNestedTables: allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables: allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  var validationOverrides = stableValidationOverrides.allowTableInPanel && !isExperimentEnabled('platform_editor_adf_validator_perf') ? _objectSpread({}, stableValidationOverrides) : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var allowTableInPanel = isPanelNestingTableSupported(schema);
-    var validationOverrides = allowTableInPanel ? _objectSpread(_objectSpread({}, props.validationOverrides), {}, {
-      allowTableInPanel: true
-    }) : props.validationOverrides;
     var _renderDocument = renderDocument(props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation, validationOverrides),
       result = _renderDocument.result,
       stat = _renderDocument.stat,
@@ -586,11 +598,6 @@ export function Renderer(props) {
   var _ref = useContext(ValidationContext) || {},
     skipValidation = _ref.skipValidation,
     allowNestedTables = _ref.allowNestedTables;
-  var validationOverrides = useMemo(function () {
-    return {
-      allowNestedTables: allowNestedTables
-    };
-  }, [allowNestedTables]);
   return jsx(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -598,7 +605,7 @@ export function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

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

@@ -10,11 +10,9 @@ import type { RendererAppearance, RendererContentMode } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const RendererFunctionalComponent: (props: RendererProps & {
+    allowNestedTables?: boolean;
     skipValidation?: boolean;
     startPos?: number;
-    validationOverrides?: {
-        allowNestedTables?: boolean;
-    };
 }) => jsx.JSX.Element;
 /**
  * Top-level ADF renderer: renders document content with analytics and validation context.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "136.2.0",
+	"version": "136.2.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
 		"@atlaskit/media-client-react": "^6.2.0",
 		"@atlaskit/media-common": "^14.5.0",
 		"@atlaskit/media-filmstrip": "^52.3.0",
-		"@atlaskit/media-ui": "^30.12.0",
+		"@atlaskit/media-ui": "^30.13.0",
 		"@atlaskit/media-viewer": "^54.6.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
@@ -85,7 +85,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.13.0",
+		"@atlaskit/editor-common": "^119.15.0",
 		"@atlaskit/link-provider": "^5.4.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -206,6 +206,9 @@
 		"platform_editor_nest_table_in_panel_patch_2": {
 			"type": "boolean"
 		},
+		"platform_editor_nest_table_in_panel_patch_3": {
+			"type": "boolean"
+		},
 		"confluence_frontend_fix_view_page_slo": {
 			"type": "boolean"
 		},