@atlaskit/renderer 133.17.0 → 133.17.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 133.17.2
+
+### Patch Changes
+
+- [`90510b2e6e5af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90510b2e6e5af) -
+  Prevent nested renderer tables from incorrectly using content-width mode
+- Updated dependencies
+
+## 133.17.1
+
+### Patch Changes
+
+- [`dbd6aad00148d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbd6aad00148d) -
+  Animate collapsible heading toggle icons
+- Updated dependencies
+
 ## 133.17.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8kuuqm3 svg{transition:var(--_1vzp3at)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

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

@@ -13,7 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _new = require("@atlaskit/button/new");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -44,13 +44,8 @@ function hasRightAlignmentMark(marks) {
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonExpandedStyles = null;
 var collapsibleHeadingButtonHiddenStyles = null;
-var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
-  return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-    label: "",
-    size: "small"
-  });
-};
 var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
   return /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
     label: "",
@@ -120,11 +115,14 @@ function CollapsibleHeadingButton(_ref3) {
     return setIsFocused(true);
   }, []);
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: (0, _runtime.ax)(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8kuuqm3 _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"]),
+    style: {
+      "--_1vzp3at": (0, _runtime.ix)("transform 0.2s ".concat(_constants.akEditorSwoopCubicBezier))
+    }
   }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? _messages.collapsibleHeadingMessages.expandSection : _messages.collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

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

@@ -25,6 +25,7 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance,
     isInsideOfBlockNode = _ref.isInsideOfBlockNode,
+    isInsideOfNestedRenderer = _ref.isInsideOfNestedRenderer,
     isInsideOfTable = _ref.isInsideOfTable,
     isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension,
     allowTableResizing = _ref.allowTableResizing,
@@ -62,7 +63,7 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
       allowTableResizing: allowTableResizing,
       rendererAppearance: rendererAppearance
     }),
-    isTableNested: isInsideOfBlockNode || isInsideOfTable
+    isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
   }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined

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

@@ -31,6 +31,7 @@ var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+var _rendererContext = require("../../renderer-context");
 var _tableNew = require("./tableNew");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _table2 = require("@atlaskit/editor-common/table");
@@ -415,6 +416,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
         allowTableAlignment = _this$props.allowTableAlignment,
@@ -528,7 +530,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           allowTableResizing: allowTableResizing,
           rendererAppearance: rendererAppearance
         }),
-        isTableNested: isInsideOfBlockNode || isInsideOfTable
+        isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
       }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style;
       if (fixTableSSRResizing) {
@@ -591,6 +593,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing,
@@ -722,6 +725,9 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+  var isInsideOfNestedRenderer = isTopLevelRenderer === false && (0, _expValEquals.expValEquals)('platform_editor_table_nested_content_mode_fix', 'isEnabled', true);
   if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
     var _props$columnWidths;
     var colWidthsSum =
@@ -730,14 +736,19 @@ var TableWithWidth = function TableWithWidth(props) {
       return total + val;
     }, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
+      return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles, props);
+      , (0, _extends2.default)({}, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     }
     return /*#__PURE__*/_react.default.createElement(_tableNew.TableProcessorWithContainerStyles
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , props);
+    , (0, _extends2.default)({}, props, {
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer
+    }));
   } else {
     return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
@@ -749,18 +760,22 @@ var TableWithWidth = function TableWithWidth(props) {
         return total + val;
       }, 0)) || 0;
       if (colWidthsSum || props.allowTableResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
         return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
           renderWidth: renderWidth
-        }, props));
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/jsx-props-no-spreading
+        }, props, {
+          isInsideOfNestedRenderer: isInsideOfNestedRenderer
+        }));
       }
       // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
       return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
         renderWidth: renderWidth
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-      }, props));
+      }, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     });
   }
 };

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

@@ -615,6 +615,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
         allowTableAlignment = _this$props.allowTableAlignment,
@@ -704,7 +705,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           allowTableResizing: allowTableResizing,
           rendererAppearance: rendererAppearance
         }),
-        isTableNested: isInsideOfBlockNode || isInsideOfTable
+        isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
       }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style = _objectSpread(_objectSpread({}, isContentModeTable && {
         '--renderer-table-max-width': renderWidthCSS
@@ -772,6 +773,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing,
@@ -1001,6 +1003,7 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
         handleRef = _this$props2.handleRef,
         isinsideMultiBodiedExtension = _this$props2.isinsideMultiBodiedExtension,
         isInsideOfBlockNode = _this$props2.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props2.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props2.isInsideOfTable,
         isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
         isPresentational = _this$props2.isPresentational,
@@ -1030,6 +1033,7 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
         handleRef: handleRef,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isNumberColumnEnabled: isNumberColumnEnabled,
         isPresentational: isPresentational,

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

@@ -73,7 +73,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 = "133.16.7";
+var packageVersion = "133.17.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8ku180e svg{transition:transform .2s cubic-bezier(.15,1,.3,1)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

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

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles/constants';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -32,11 +32,8 @@ function hasRightAlignmentMark(marks) {
 const wrapperStyles = null;
 const collapsibleHeadingWrapperStyles = null;
 const collapsibleHeadingButtonStyles = null;
+const collapsibleHeadingButtonExpandedStyles = null;
 const collapsibleHeadingButtonHiddenStyles = null;
-const ChevronDownSmallIcon = () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
-  label: "",
-  size: "small"
-});
 const ChevronRightSmallIcon = () => /*#__PURE__*/React.createElement(ChevronRightIcon, {
   label: "",
   size: "small"
@@ -98,11 +95,11 @@ function CollapsibleHeadingButton({
   const handleBlur = React.useCallback(() => setIsFocused(false), []);
   const handleKeyDown = React.useCallback(() => setIsFocused(true), []);
   return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8ku180e _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? collapsibleHeadingMessages.expandSection : collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

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

@@ -17,6 +17,7 @@ export const Table = /*#__PURE__*/React.memo(({
   tableNode,
   rendererAppearance,
   isInsideOfBlockNode,
+  isInsideOfNestedRenderer,
   isInsideOfTable,
   isinsideMultiBodiedExtension,
   allowTableResizing,
@@ -54,7 +55,7 @@ export const Table = /*#__PURE__*/React.memo(({
       allowTableResizing,
       rendererAppearance
     }),
-    isTableNested: isInsideOfBlockNode || isInsideOfTable
+    isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
   }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("table", _extends({}, fg('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined

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

@@ -18,6 +18,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { useRendererContext } from '../../renderer-context';
 import { TableProcessorWithContainerStyles, RefSyncBlockFakeBorders } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
@@ -356,6 +357,7 @@ export class TableContainer extends React.Component {
       tableNode,
       rendererAppearance,
       isInsideOfBlockNode,
+      isInsideOfNestedRenderer,
       isInsideOfTable,
       isinsideMultiBodiedExtension,
       allowTableAlignment,
@@ -469,7 +471,7 @@ export class TableContainer extends React.Component {
         allowTableResizing,
         rendererAppearance
       }),
-      isTableNested: isInsideOfBlockNode || isInsideOfTable
+      isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
     }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
     let style;
     if (fixTableSSRResizing) {
@@ -534,6 +536,7 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer,
       isInsideOfTable: isInsideOfTable,
       isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
       allowTableResizing: allowTableResizing,
@@ -662,20 +665,29 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 const TableWithWidth = props => {
+  const {
+    isTopLevelRenderer
+  } = useRendererContext();
+  const isInsideOfNestedRenderer = isTopLevelRenderer === false && expValEquals('platform_editor_table_nested_content_mode_fix', 'isEnabled', true);
   if (fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
     const colWidthsSum =
     // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
     ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
+      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles, props);
+      , _extends({}, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     }
     return /*#__PURE__*/React.createElement(TableProcessorWithContainerStyles
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , props);
+    , _extends({}, props, {
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer
+    }));
   } else {
     return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
       width
@@ -686,18 +698,22 @@ const TableWithWidth = props => {
       // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
       ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce((total, val) => total + val, 0)) || 0;
       if (colWidthsSum || props.allowTableResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
         return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
           renderWidth: renderWidth
-        }, props));
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/jsx-props-no-spreading
+        }, props, {
+          isInsideOfNestedRenderer: isInsideOfNestedRenderer
+        }));
       }
       // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
       return /*#__PURE__*/React.createElement(TableProcessor, _extends({
         renderWidth: renderWidth
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-      }, props));
+      }, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     });
   }
 };

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

@@ -550,6 +550,7 @@ export class TableContainer extends React.Component {
       tableNode,
       rendererAppearance,
       isInsideOfBlockNode,
+      isInsideOfNestedRenderer,
       isInsideOfTable,
       isinsideMultiBodiedExtension,
       allowTableAlignment,
@@ -642,7 +643,7 @@ export class TableContainer extends React.Component {
         allowTableResizing,
         rendererAppearance
       }),
-      isTableNested: isInsideOfBlockNode || isInsideOfTable
+      isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
     }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
     const style = {
       ...(isContentModeTable && {
@@ -711,6 +712,7 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer,
       isInsideOfTable: isInsideOfTable,
       isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
       allowTableResizing: allowTableResizing,
@@ -937,6 +939,7 @@ export class TableProcessorWithContainerStyles extends React.Component {
       handleRef,
       isinsideMultiBodiedExtension,
       isInsideOfBlockNode,
+      isInsideOfNestedRenderer,
       isInsideOfTable,
       isNumberColumnEnabled,
       isPresentational,
@@ -967,6 +970,7 @@ export class TableProcessorWithContainerStyles extends React.Component {
       handleRef: handleRef,
       isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
       isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer,
       isInsideOfTable: isInsideOfTable,
       isNumberColumnEnabled: isNumberColumnEnabled,
       isPresentational: isPresentational,

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

@@ -59,7 +59,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 = "133.16.7";
+const packageVersion = "133.17.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8kuuqm3 svg{transition:var(--_1vzp3at)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

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

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles/constants';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -37,13 +37,8 @@ function hasRightAlignmentMark(marks) {
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonExpandedStyles = null;
 var collapsibleHeadingButtonHiddenStyles = null;
-var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
-  return /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    label: "",
-    size: "small"
-  });
-};
 var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
   return /*#__PURE__*/React.createElement(ChevronRightIcon, {
     label: "",
@@ -113,11 +108,14 @@ function CollapsibleHeadingButton(_ref3) {
     return setIsFocused(true);
   }, []);
   return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8kuuqm3 _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"]),
+    style: {
+      "--_1vzp3at": ix("transform 0.2s ".concat(akEditorSwoopCubicBezier))
+    }
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? collapsibleHeadingMessages.expandSection : collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

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

@@ -18,6 +18,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance,
     isInsideOfBlockNode = _ref.isInsideOfBlockNode,
+    isInsideOfNestedRenderer = _ref.isInsideOfNestedRenderer,
     isInsideOfTable = _ref.isInsideOfTable,
     isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension,
     allowTableResizing = _ref.allowTableResizing,
@@ -55,7 +56,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
       allowTableResizing: allowTableResizing,
       rendererAppearance: rendererAppearance
     }),
-    isTableNested: isInsideOfBlockNode || isInsideOfTable
+    isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
   }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("table", _extends({}, fg('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined

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

@@ -31,6 +31,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { useRendererContext } from '../../renderer-context';
 import { TableProcessorWithContainerStyles, RefSyncBlockFakeBorders } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
@@ -408,6 +409,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
         allowTableAlignment = _this$props.allowTableAlignment,
@@ -521,7 +523,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           allowTableResizing: allowTableResizing,
           rendererAppearance: rendererAppearance
         }),
-        isTableNested: isInsideOfBlockNode || isInsideOfTable
+        isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
       }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style;
       if (fixTableSSRResizing) {
@@ -584,6 +586,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing,
@@ -717,6 +720,9 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
+  var _useRendererContext = useRendererContext(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+  var isInsideOfNestedRenderer = isTopLevelRenderer === false && expValEquals('platform_editor_table_nested_content_mode_fix', 'isEnabled', true);
   if (fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
     var colWidthsSum =
@@ -725,14 +731,19 @@ var TableWithWidth = function TableWithWidth(props) {
       return total + val;
     }, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
+      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles, props);
+      , _extends({}, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     }
     return /*#__PURE__*/React.createElement(TableProcessorWithContainerStyles
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , props);
+    , _extends({}, props, {
+      isInsideOfNestedRenderer: isInsideOfNestedRenderer
+    }));
   } else {
     return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
@@ -744,18 +755,22 @@ var TableWithWidth = function TableWithWidth(props) {
         return total + val;
       }, 0)) || 0;
       if (colWidthsSum || props.allowTableResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
         return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
           renderWidth: renderWidth
-        }, props));
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/jsx-props-no-spreading
+        }, props, {
+          isInsideOfNestedRenderer: isInsideOfNestedRenderer
+        }));
       }
       // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
       return /*#__PURE__*/React.createElement(TableProcessor, _extends({
         renderWidth: renderWidth
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-      }, props));
+      }, props, {
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer
+      }));
     });
   }
 };

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

@@ -609,6 +609,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
         allowTableAlignment = _this$props.allowTableAlignment,
@@ -698,7 +699,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           allowTableResizing: allowTableResizing,
           rendererAppearance: rendererAppearance
         }),
-        isTableNested: isInsideOfBlockNode || isInsideOfTable
+        isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
       }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style = _objectSpread(_objectSpread({}, isContentModeTable && {
         '--renderer-table-max-width': renderWidthCSS
@@ -766,6 +767,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing,
@@ -995,6 +997,7 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
         handleRef = _this$props2.handleRef,
         isinsideMultiBodiedExtension = _this$props2.isinsideMultiBodiedExtension,
         isInsideOfBlockNode = _this$props2.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props2.isInsideOfNestedRenderer,
         isInsideOfTable = _this$props2.isInsideOfTable,
         isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
         isPresentational = _this$props2.isPresentational,
@@ -1024,6 +1027,7 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
         handleRef: handleRef,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
         isInsideOfTable: isInsideOfTable,
         isNumberColumnEnabled: isNumberColumnEnabled,
         isPresentational: isPresentational,

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

@@ -64,7 +64,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 = "133.16.7";
+var packageVersion = "133.17.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

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

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

@@ -7,6 +7,7 @@ export type SharedTableProps = {
     columnWidths?: Array<number>;
     isinsideMultiBodiedExtension?: boolean;
     isInsideOfBlockNode?: boolean;
+    isInsideOfNestedRenderer?: boolean;
     isInsideOfTable?: boolean;
     isNumberColumnEnabled: boolean;
     layout: TableLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.17.0",
+	"version": "133.17.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"@atlaskit/status": "^5.8.0",
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^135.2.0",
+		"@atlaskit/tmp-editor-statsig": "^135.5.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -83,7 +83,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.43.0",
+		"@atlaskit/editor-common": "^116.44.0",
 		"@atlaskit/link-provider": "^5.2.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -101,7 +101,7 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^42.2.0",
-		"@atlaskit/mention": "^27.11.0",
+		"@atlaskit/mention": "^27.12.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/navigation-system": "^10.9.0",
 		"@atlaskit/profilecard": "^26.14.0",
@@ -212,9 +212,6 @@
 		"platform_editor_numbered_column_in_include": {
 			"type": "boolean"
 		},
-		"jfp-magma-ssr-iv-editor-media": {
-			"type": "boolean"
-		},
 		"jfp-magma-ssr-iv-editor-links": {
 			"type": "boolean"
 		},