@atlaskit/renderer 108.6.10 → 108.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 108.7.0
+
+### Minor Changes
+
+- [`5f028fb62a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f028fb62a1) - ED-19038 added mediaSingle.widthType support to renderer.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 108.6.11
+
+### Patch Changes
+
+- [`a46a10e8368`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a46a10e8368) - align table sticky header for custom table widths
+
 ## 108.6.10
 
 ### Patch Changes

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -55,7 +55,8 @@ var MediaSingle = function MediaSingle(props) {
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     layout = props.layout,
     children = props.children,
-    pctWidth = props.width;
+    widthAttr = props.width,
+    widthType = props.widthType;
   var isCaptionsFlaggedOn = (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags);
   var _React$useState = _react.default.useState({
       width: 0,
@@ -163,7 +164,10 @@ var MediaSingle = function MediaSingle(props) {
       height: height,
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      size: {
+        width: widthAttr,
+        widthType: widthType
+      },
       fullWidthMode: isFullWidth
     }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };

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

@@ -14,6 +14,7 @@ var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -25,10 +26,16 @@ var modeSpecficStyles = {
   stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
   'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
 };
+var stickyHeaderZIndex;
+if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+  stickyHeaderZIndex = 13;
+} else {
+  stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
+}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".is-sticky.right-shadow::after,\n    &\n    .", ".is-sticky.left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
@@ -57,19 +64,31 @@ var StickyTable = function StickyTable(_ref) {
     children = _ref.children,
     columnWidths = _ref.columnWidths,
     renderWidth = _ref.renderWidth,
-    rowHeight = _ref.rowHeight;
-  return (0, _react2.jsx)("div", {
-    css: {
+    rowHeight = _ref.rowHeight,
+    tableNode = _ref.tableNode;
+  var styles;
+  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+    styles = (0, _react2.css)({
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    });
+  } else {
+    styles = (0, _react2.css)({
       left: left && left < 0 ? left : undefined,
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
-    }
+    });
+  }
+  /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+  return (0, _react2.jsx)("div", {
+    css: styles
   }, (0, _react2.jsx)(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, (0, _react2.jsx)("div", {
-    className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
+    className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -84,7 +103,8 @@ var StickyTable = function StickyTable(_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -268,7 +268,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       }
       var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = _react.default.Children.toArray(this.props.children);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
         layout: layout,
@@ -288,9 +288,23 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left
+          left: left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
         }
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        tableWidth: tableWidth,
+        layout: layout,
+        renderWidth: renderWidth,
+        handleRef: this.props.handleRef,
+        shadowClassNames: this.props.shadowClassNames,
+        top: this.stickyTop,
+        mode: stickyMode,
+        innerRef: this.stickyWrapperRef,
+        wrapperWidth: wrapperWidth,
+        columnWidths: columnWidths,
+        rowHeight: this.headerRowHeight,
+        tableNode: tableNode
+      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
         onScroll: this.props.stickyHeaders && this.onWrapperScrolled

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.6.10";
+var packageVersion = "108.7.0";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/version.json

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

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -42,7 +42,8 @@ const MediaSingle = props => {
     isInsideOfBlockNode,
     layout,
     children,
-    width: pctWidth
+    width: widthAttr,
+    widthType
   } = props;
   const isCaptionsFlaggedOn = getMediaFeatureFlag('captions', featureFlags);
   const [externalImageDimensions, setExternalImageDimensions] = React.useState({
@@ -148,7 +149,10 @@ const MediaSingle = props => {
       height: height,
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      size: {
+        width: widthAttr,
+        widthType
+      },
       fullWidthMode: isFullWidth
     }, jsx(Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };

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

@@ -5,6 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
@@ -19,12 +20,18 @@ const modeSpecficStyles = {
     position: absolute;
   `
 };
+let stickyHeaderZIndex;
+if (getBooleanFF('platform.editor.custom-table-width')) {
+  stickyHeaderZIndex = 13;
+} else {
+  stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 const fixedTableDivStaticStyles = (top, width) => css`
   ${typeof top === 'number' && `top: ${top}px;`}
   width: ${width}px;
-  z-index: ${akEditorStickyHeaderZIndex};
+  z-index: ${stickyHeaderZIndex};
   &
     .${TableSharedCssClassName.TABLE_CONTAINER},
     &
@@ -47,9 +54,9 @@ const fixedTableDivStaticStyles = (top, width) => css`
   }
 
   &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.right-shadow::after,
+    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
     &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.left-shadow::before {
+    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
     top: 0px;
     height: 100%;
   }
@@ -82,20 +89,32 @@ export const StickyTable = ({
   children,
   columnWidths,
   renderWidth,
-  rowHeight
+  rowHeight,
+  tableNode
 }) => {
-  return jsx("div", {
-    css: {
+  let styles;
+  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    styles = css({
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    });
+  } else {
+    styles = css({
       left: left && left < 0 ? left : undefined,
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
-    }
+    });
+  }
+  /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+  return jsx("div", {
+    css: styles
   }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, jsx("div", {
-    className: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames || ''}`,
+    className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -110,7 +129,8 @@ export const StickyTable = ({
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -227,7 +227,7 @@ export class TableContainer extends React.Component {
     }
     const wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
     const children = React.Children.toArray(this.props.children);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
       tableWidth: tableWidth,
       layout: layout,
@@ -247,9 +247,23 @@ export class TableContainer extends React.Component {
       ref: this.props.handleRef,
       style: {
         width: tableWidth,
-        left
+        left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      tableWidth: tableWidth,
+      layout: layout,
+      renderWidth: renderWidth,
+      handleRef: this.props.handleRef,
+      shadowClassNames: this.props.shadowClassNames,
+      top: this.stickyTop,
+      mode: stickyMode,
+      innerRef: this.stickyWrapperRef,
+      wrapperWidth: wrapperWidth,
+      columnWidths: columnWidths,
+      rowHeight: this.headerRowHeight,
+      tableNode: tableNode
+    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
       ref: this.wrapperRef,
       onScroll: this.props.stickyHeaders && this.onWrapperScrolled

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.6.10";
+const packageVersion = "108.7.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/version.json

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

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -43,7 +43,8 @@ var MediaSingle = function MediaSingle(props) {
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     layout = props.layout,
     children = props.children,
-    pctWidth = props.width;
+    widthAttr = props.width,
+    widthType = props.widthType;
   var isCaptionsFlaggedOn = getMediaFeatureFlag('captions', featureFlags);
   var _React$useState = React.useState({
       width: 0,
@@ -151,7 +152,10 @@ var MediaSingle = function MediaSingle(props) {
       height: height,
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      size: {
+        width: widthAttr,
+        widthType: widthType
+      },
       fullWidthMode: isFullWidth
     }, jsx(Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };

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

@@ -9,6 +9,7 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -17,10 +18,16 @@ var modeSpecficStyles = {
   stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
   'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
 };
+var stickyHeaderZIndex;
+if (getBooleanFF('platform.editor.custom-table-width')) {
+  stickyHeaderZIndex = 13;
+} else {
+  stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".is-sticky.right-shadow::after,\n    &\n    .", ".is-sticky.left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
@@ -48,19 +55,31 @@ export var StickyTable = function StickyTable(_ref) {
     children = _ref.children,
     columnWidths = _ref.columnWidths,
     renderWidth = _ref.renderWidth,
-    rowHeight = _ref.rowHeight;
-  return jsx("div", {
-    css: {
+    rowHeight = _ref.rowHeight,
+    tableNode = _ref.tableNode;
+  var styles;
+  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    styles = css({
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    });
+  } else {
+    styles = css({
       left: left && left < 0 ? left : undefined,
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
-    }
+    });
+  }
+  /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+  return jsx("div", {
+    css: styles
   }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, jsx("div", {
-    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
+    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -75,7 +94,8 @@ export var StickyTable = function StickyTable(_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -261,7 +261,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       }
       var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = React.Children.toArray(this.props.children);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
         layout: layout,
@@ -281,9 +281,23 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left
+          left: left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
         }
-      }, /*#__PURE__*/React.createElement("div", {
+      }, getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        tableWidth: tableWidth,
+        layout: layout,
+        renderWidth: renderWidth,
+        handleRef: this.props.handleRef,
+        shadowClassNames: this.props.shadowClassNames,
+        top: this.stickyTop,
+        mode: stickyMode,
+        innerRef: this.stickyWrapperRef,
+        wrapperWidth: wrapperWidth,
+        columnWidths: columnWidths,
+        rowHeight: this.headerRowHeight,
+        tableNode: tableNode
+      }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
         onScroll: this.props.stickyHeaders && this.onWrapperScrolled

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.6.10";
+var packageVersion = "108.7.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/version.json

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

package/dist/types/react/nodes/mediaSingle/index.d.ts

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
-import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import type { EventHandlers, MediaSingleWidthType } from '@atlaskit/editor-common/ui';
 import { AnalyticsEventPayload } from '../../../analytics/events';
 import { RendererAppearance } from '../../../ui/Renderer/types';
 export interface Props {
@@ -11,6 +11,7 @@ export interface Props {
     layout: MediaSingleLayout;
     eventHandlers?: EventHandlers;
     width?: number;
+    widthType?: MediaSingleWidthType;
     isInsideOfBlockNode?: boolean;
     rendererAppearance: RendererAppearance;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import { Node as PMNode } from 'prosemirror-model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { TableLayout } from '@atlaskit/adf-schema';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
@@ -24,8 +25,9 @@ export type StickyTableProps = {
     layout: TableLayout;
     columnWidths?: number[];
     renderWidth: number;
+    tableNode?: PMNode;
 } & OverflowShadowProps;
-export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, }: StickyTableProps) => jsx.JSX.Element;
+export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, }: StickyTableProps) => jsx.JSX.Element;
 export declare class OverflowParent {
     private ref;
     private constructor();

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

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
-import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import type { EventHandlers, MediaSingleWidthType } from '@atlaskit/editor-common/ui';
 import { AnalyticsEventPayload } from '../../../analytics/events';
 import { RendererAppearance } from '../../../ui/Renderer/types';
 export interface Props {
@@ -11,6 +11,7 @@ export interface Props {
     layout: MediaSingleLayout;
     eventHandlers?: EventHandlers;
     width?: number;
+    widthType?: MediaSingleWidthType;
     isInsideOfBlockNode?: boolean;
     rendererAppearance: RendererAppearance;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import { Node as PMNode } from 'prosemirror-model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { TableLayout } from '@atlaskit/adf-schema';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
@@ -24,8 +25,9 @@ export type StickyTableProps = {
     layout: TableLayout;
     columnWidths?: number[];
     renderWidth: number;
+    tableNode?: PMNode;
 } & OverflowShadowProps;
-export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, }: StickyTableProps) => jsx.JSX.Element;
+export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, }: StickyTableProps) => jsx.JSX.Element;
 export declare class OverflowParent {
     private ref;
     private constructor();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.6.10",
+  "version": "108.7.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.21.0",
+    "@atlaskit/editor-common": "^74.23.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-shared-styles": "^2.4.0",
@@ -69,9 +69,10 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/editor-core": "^185.16.0",
+    "@atlaskit/editor-core": "^186.0.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,546 @@
+## API Report File for "@atlaskit/renderer"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ACTION } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import type { ADFStage } from '@atlaskit/editor-common/validator';
+import type { AnnotationProviders } from '@atlaskit/editor-common/types';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { DocNode } from '@atlaskit/adf-schema';
+import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import { EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import { Fragment } from 'prosemirror-model';
+import { jsx } from '@emotion/react';
+import { Mark } from 'prosemirror-model';
+import { MediaClientConfig } from '@atlaskit/media-core';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { Node as Node_2 } from 'prosemirror-model';
+import { OperationalAEP } from '@atlaskit/editor-common/analytics';
+import { PropsDifference } from '@atlaskit/editor-common/utils';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { Schema } from 'prosemirror-model';
+import { SEVERITY } from '@atlaskit/editor-common/utils';
+import { ShallowPropsDifference } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { SSR } from '@atlaskit/media-common';
+import type { Transformer as Transformer_2 } from '@atlaskit/editor-common/types';
+import { UNSUPPORTED_CONTENT_LEVEL_SEVERITY } from '@atlaskit/editor-common/utils';
+import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/utils';
+import type { UnsupportedContentPayload } from '@atlaskit/editor-common/utils';
+import type { UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
+
+// @public (undocumented)
+export class ADFEncoder<T> {
+    constructor(createTransformerWithSchema: TransformerProvider<T>);
+    // (undocumented)
+    encode: (value: T) => any;
+}
+
+// @public (undocumented)
+type AEP<Action, ActionSubject, ActionSubjectID, Attributes, EventType> = {
+    action: Action;
+    actionSubject: ActionSubject;
+    actionSubjectId?: ActionSubjectID;
+    attributes?: Attributes;
+    eventType: EventType;
+};
+
+// @public (undocumented)
+type AnalyticsEventPayload<T = void> = AnchorLinkAEP | AnnotationAEP | AnnotationDeleteAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | ComponentCrashErrorAEP | ExpandAEP | HeadingAnchorLinkButtonAEP | InvalidProsemirrorDocumentErrorAEP | MediaLnkTransformedAEP | RendererReRenderedAEP<T> | RendererRenderedAEP | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | RendererStartAEP | RendererTTIAEP | RendererUnsupportedContentLevelsTrackingErrored | RendererUnsupportedContentLevelsTrackingSucceeded | TableSortColumnAEP | TableSortColumnNotAllowedAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | VisitLinkAEP | VisitMediaLinkAEP;
+
+// @public (undocumented)
+type AnchorLinkAEP = UIAEP<ACTION.VIEWED, ACTION_SUBJECT.ANCHOR_LINK, undefined, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+}>;
+
+// @public (undocumented)
+type AnnotationActionType = ACTION.CLOSED | ACTION.CREATE_NOT_ALLOWED | ACTION.DELETED | ACTION.EDITED | ACTION.INSERTED | ACTION.OPENED | ACTION.RESOLVED | ACTION.VIEWED;
+
+// @public (undocumented)
+type AnnotationAEP = AEP<AnnotationActionType, ACTION_SUBJECT.ANNOTATION, ACTION_SUBJECT_ID.INLINE_COMMENT, AnnotationAEPAttributes, undefined>;
+
+// @public (undocumented)
+type AnnotationAEPAttributes = AnnotationDraftAEPAttributes | AnnotationResolvedAEPAttributes;
+
+// @public (undocumented)
+type AnnotationDeleteAEP = AEP<AnnotationActionType, ACTION_SUBJECT.ANNOTATION, ACTION_SUBJECT_ID, undefined, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type AnnotationDraftAEPAttributes = {
+    overlap?: number;
+};
+
+// @public (undocumented)
+type AnnotationResolvedAEPAttributes = {
+    method?: RESOLVE_METHOD;
+};
+
+// @public (undocumented)
+type ButtonAEP<ActionSubjectID, Attributes> = UIAEP<ACTION.CLICKED, ACTION_SUBJECT.BUTTON, ActionSubjectID, Attributes>;
+
+// @public (undocumented)
+type CodeBlockCopyAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_COPY, undefined>;
+
+// @public (undocumented)
+type CodeBlockWrapAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_WRAP, {
+    wrapped: boolean;
+}>;
+
+// @public (undocumented)
+type ComponentCrashErrorAEP = OperationalAEP<ACTION.CRASHED, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
+    platform: PLATFORM.WEB;
+    errorMessage?: string;
+    errorStack?: string;
+    componentStack?: string;
+    errorRethrown?: boolean;
+}, {
+    errorStack?: string;
+}>;
+
+// @public (undocumented)
+type DispatchAnalyticsEvent = (event: AnalyticsEventPayload) => void;
+
+// @public (undocumented)
+type ExpandAEP = AEP<ACTION.TOGGLE_EXPAND, ACTION_SUBJECT.EXPAND | ACTION_SUBJECT.NESTED_EXPAND, undefined, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+    expanded: boolean;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type HeadingAnchorLinkButtonAEP = ButtonAEP<ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK, undefined>;
+
+// @public (undocumented)
+type HeadingAnchorLinksConfig = {
+    activeHeadingId?: string;
+    allowNestedHeaderLinks?: boolean;
+};
+
+// @public (undocumented)
+export type HeadingAnchorLinksProps = HeadingAnchorLinksConfig | boolean;
+
+// @public (undocumented)
+type InvalidProsemirrorDocumentErrorAEP = AEP<ACTION.INVALID_PROSEMIRROR_DOCUMENT, ACTION_SUBJECT.RENDERER, ACTION_SUBJECT_ID, {
+    platform: PLATFORM.WEB;
+    errorStack?: string;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+type MediaLnkTransformedAEP = AEP<ACTION.MEDIA_LINK_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+interface MediaOptions {
+    // (undocumented)
+    allowLinking?: boolean;
+    // (undocumented)
+    enableDownloadButton?: boolean;
+    // (undocumented)
+    featureFlags?: MediaFeatureFlags;
+    // (undocumented)
+    ssr?: MediaSSR;
+}
+
+// @public (undocumented)
+export type MediaSSR = {
+    mode: SSR;
+    config: MediaClientConfig;
+};
+
+// @public (undocumented)
+enum MODE {
+    // (undocumented)
+    EDITOR = "editor",
+    // (undocumented)
+    RENDERER = "renderer"
+}
+
+// @public (undocumented)
+type NodeComponentsProps = {
+    [key: string]: React.ComponentType<any>;
+};
+
+// @public (undocumented)
+interface ParentInfo {
+    // (undocumented)
+    parentIsIncompleteTask: boolean;
+    // (undocumented)
+    path: Array<Node_2>;
+    // (undocumented)
+    pos: number;
+}
+
+// @public (undocumented)
+enum PLATFORM {
+    // (undocumented)
+    HYBRID = "mobileHybrid",
+    // (undocumented)
+    NATIVE = "mobileNative",
+    // (undocumented)
+    WEB = "web"
+}
+
+// @public (undocumented)
+interface RawObjectFeatureFlags {
+    // (undocumented)
+    ['renderer-render-tracking']: string;
+}
+
+// @public (undocumented)
+export const ReactRenderer: (props: RendererProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export class ReactSerializer implements Serializer<JSX.Element> {
+    constructor(init: ReactSerializerInit);
+    // (undocumented)
+    static buildMarkStructure(content: Node_2[]): Mark[];
+    // (undocumented)
+    static fromSchema(_: unknown, init: ReactSerializerInit): ReactSerializer;
+    // (undocumented)
+    static getChildNodes(fragment: Fragment): (Node_2 | TextWrapper)[];
+    // (undocumented)
+    static getMarks(node: Node_2): Mark[];
+    // (undocumented)
+    serializeFragment(fragment: Fragment, props?: any, target?: any, key?: string, parentInfo?: ParentInfo): JSX.Element | null;
+}
+
+// @public (undocumented)
+interface ReactSerializerInit {
+    // (undocumented)
+    allowAltTextOnImages?: boolean;
+    // (undocumented)
+    allowAnnotations?: boolean;
+    // (undocumented)
+    allowColumnSorting?: boolean;
+    // (undocumented)
+    allowCopyToClipboard?: boolean;
+    // (undocumented)
+    allowCustomPanels?: boolean;
+    // (undocumented)
+    allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
+    // (undocumented)
+    allowMediaLinking?: boolean;
+    // (undocumented)
+    allowPlaceholderText?: boolean;
+    // (undocumented)
+    allowSelectAllTrap?: boolean;
+    // (undocumented)
+    allowWindowedCodeBlock?: boolean;
+    // (undocumented)
+    allowWrapCodeBlock?: boolean;
+    // (undocumented)
+    appearance?: RendererAppearance;
+    // (undocumented)
+    disableActions?: boolean;
+    // (undocumented)
+    disableHeadingIDs?: boolean;
+    // (undocumented)
+    emojiResourceConfig?: EmojiResourceConfig;
+    // (undocumented)
+    eventHandlers?: EventHandlers;
+    // (undocumented)
+    extensionHandlers?: ExtensionHandlers;
+    // (undocumented)
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    // (undocumented)
+    media?: MediaOptions;
+    // (undocumented)
+    nodeComponents?: NodeComponentsProps;
+    // (undocumented)
+    objectContext?: RendererContext;
+    // (undocumented)
+    portal?: HTMLElement;
+    // (undocumented)
+    providers?: ProviderFactory;
+    // (undocumented)
+    shouldOpenMediaViewer?: boolean;
+    // (undocumented)
+    smartLinks?: SmartLinksOptions;
+    // (undocumented)
+    stickyHeaders?: StickyHeaderConfig;
+    // (undocumented)
+    surroundTextNodesWithTextWrapper?: boolean;
+}
+
+// @public (undocumented)
+export const renderDocument: <T>(doc: any, serializer: Serializer<T>, schema?: Schema, adfStage?: ADFStage, useSpecBasedValidator?: boolean, rendererId?: string, dispatchAnalyticsEvent?: DispatchAnalyticsEvent, unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking, appearance?: RendererAppearance) => RenderOutput<T | null>;
+
+// @public (undocumented)
+export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | 'mobile' | undefined;
+
+// @public (undocumented)
+export interface RendererContext {
+    // (undocumented)
+    adDoc?: any;
+    // (undocumented)
+    containerAri?: string;
+    // (undocumented)
+    objectAri?: string;
+    // (undocumented)
+    schema?: Schema;
+}
+
+// @public (undocumented)
+export interface RendererProps {
+    // (undocumented)
+    adfStage?: ADFStage;
+    // (undocumented)
+    allowAltTextOnImages?: boolean;
+    // (undocumented)
+    allowAnnotations?: boolean;
+    // (undocumented)
+    allowColumnSorting?: boolean;
+    // (undocumented)
+    allowCopyToClipboard?: boolean;
+    // (undocumented)
+    allowCustomPanels?: boolean;
+    // (undocumented)
+    allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
+    // (undocumented)
+    allowPlaceholderText?: boolean;
+    // (undocumented)
+    allowSelectAllTrap?: boolean;
+    // (undocumented)
+    allowUgcScrubber?: boolean;
+    // (undocumented)
+    allowWrapCodeBlock?: boolean;
+    // (undocumented)
+    analyticsEventSeverityTracking?: {
+        enabled: boolean;
+        severityNormalThreshold: number;
+        severityDegradedThreshold: number;
+    };
+    // (undocumented)
+    annotationProvider?: AnnotationProviders | null;
+    // (undocumented)
+    appearance?: RendererAppearance;
+    // (undocumented)
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    // (undocumented)
+    dataProviders?: ProviderFactory;
+    // (undocumented)
+    disableActions?: boolean;
+    // (undocumented)
+    disableHeadingIDs?: boolean;
+    // (undocumented)
+    document: DocNode;
+    // (undocumented)
+    emojiResourceConfig?: EmojiResourceConfig;
+    // (undocumented)
+    enableSsrInlineScripts?: boolean;
+    // (undocumented)
+    eventHandlers?: EventHandlers;
+    // (undocumented)
+    extensionHandlers?: ExtensionHandlers;
+    // (undocumented)
+    fadeOutHeight?: number;
+    featureFlags?: Partial<RawObjectFeatureFlags> | {
+        [featureFlag: string]: boolean;
+    };
+    // (undocumented)
+    innerRef?: React.RefObject<HTMLDivElement>;
+    // (undocumented)
+    maxHeight?: number;
+    // (undocumented)
+    media?: MediaOptions;
+    // (undocumented)
+    nodeComponents?: NodeComponentsProps;
+    // (undocumented)
+    onComplete?: (stat: RenderOutputStat) => void;
+    // (undocumented)
+    onError?: (error: any) => void;
+    // (undocumented)
+    portal?: HTMLElement;
+    // (undocumented)
+    rendererContext?: RendererContext;
+    // (undocumented)
+    schema?: Schema;
+    // (undocumented)
+    shouldOpenMediaViewer?: boolean;
+    // (undocumented)
+    smartLinks?: SmartLinksOptions;
+    // (undocumented)
+    stickyHeaders?: StickyHeaderProps;
+    // (undocumented)
+    truncated?: boolean;
+    // (undocumented)
+    unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
+    // (undocumented)
+    useSpecBasedValidator?: boolean;
+}
+
+// @public (undocumented)
+type RendererRenderedAEP = AEP<ACTION.RENDERED, ACTION_SUBJECT.RENDERER, undefined, {
+    platform: PLATFORM.WEB;
+    duration: number;
+    distortedDuration: boolean;
+    ttfb?: number;
+    nodes: Record<string, number>;
+    severity?: SEVERITY;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+type RendererReRenderedAEP<Props> = AEP<ACTION.RE_RENDERED, ACTION_SUBJECT.RENDERER, undefined, {
+    propsDifference: PropsDifference<Props> | ShallowPropsDifference<Props>;
+    count: number;
+    componentId?: string;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+type RendererSelectAllCaughtAEP = AEP<ACTION.SELECT_ALL_CAUGHT, ACTION_SUBJECT.RENDERER, undefined, {
+    platform: PLATFORM.WEB;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type RendererSelectAllEscapedAEP = AEP<ACTION.SELECT_ALL_ESCAPED, ACTION_SUBJECT.RENDERER, undefined, {
+    platform: PLATFORM.WEB;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type RendererStartAEP = AEP<ACTION.STARTED, ACTION_SUBJECT.RENDERER, undefined, {
+    platform: PLATFORM.WEB;
+}, EVENT_TYPE.UI>;
+
+// @public (undocumented)
+type RendererTTIAEP = AEP<ACTION.RENDERER_TTI, ACTION_SUBJECT.RENDERER, undefined, {
+    tti: number;
+    ttiFromInvocation: number;
+    canceled: boolean;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+type RendererUnsupportedContentLevelsTrackingErrored = AEP<ACTION.UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED, ACTION_SUBJECT.RENDERER, undefined, {
+    platform: PLATFORM.WEB;
+    error: string;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+type RendererUnsupportedContentLevelsTrackingSucceeded = AEP<ACTION.UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED, ACTION_SUBJECT.RENDERER, undefined, {
+    appearance?: string;
+    platform: PLATFORM.WEB;
+    unsupportedContentLevelSeverity: UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
+    unsupportedContentLevelPercentage: number;
+    unsupportedNodesCount: number;
+    supportedNodesCount: number;
+}, EVENT_TYPE.OPERATIONAL>;
+
+// @public (undocumented)
+interface RenderOutput<T> {
+    // (undocumented)
+    pmDoc?: Node_2;
+    // (undocumented)
+    result: T;
+    // (undocumented)
+    stat: RenderOutputStat;
+}
+
+// @public (undocumented)
+export interface RenderOutputStat {
+    // (undocumented)
+    buildTreeTime?: number;
+    // (undocumented)
+    sanitizeTime: number;
+    // (undocumented)
+    serializeTime?: number;
+}
+
+// @public (undocumented)
+enum RESOLVE_METHOD {
+    // (undocumented)
+    COMPONENT = "component",
+    // (undocumented)
+    CONSUMER = "consumer",
+    // (undocumented)
+    ORPHANED = "orphaned"
+}
+
+// @public (undocumented)
+export interface Serializer<T> {
+    // (undocumented)
+    serializeFragment(fragment: Fragment, props?: any, target?: any, key?: string): T | null;
+}
+
+// @public (undocumented)
+interface SmartLinksOptions {
+    // (undocumented)
+    showAuthTooltip?: boolean;
+    // (undocumented)
+    showServerActions?: boolean;
+    // (undocumented)
+    ssr?: boolean;
+}
+
+// @public (undocumented)
+type StickyHeaderConfig = {
+    offsetTop?: number;
+};
+
+// @public (undocumented)
+type StickyHeaderProps = ({
+    show?: boolean;
+} & StickyHeaderConfig) | boolean;
+
+// @public (undocumented)
+type TableSortColumnAEP = AEP<ACTION.SORT_COLUMN, ACTION_SUBJECT.TABLE, undefined, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+    sortOrder: SortOrder;
+    columnIndex: number;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type TableSortColumnNotAllowedAEP = AEP<ACTION.SORT_COLUMN_NOT_ALLOWED, ACTION_SUBJECT.TABLE, undefined, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+export class TextSerializer implements Serializer<string> {
+    constructor(schema: Schema);
+    // (undocumented)
+    static fromSchema(schema?: Schema): TextSerializer;
+    // (undocumented)
+    serializeFragment(fragment: Fragment): string;
+}
+
+// @public (undocumented)
+interface TextWrapper {
+    // (undocumented)
+    content: Node_2[];
+    // (undocumented)
+    nodeSize: number;
+    // (undocumented)
+    type: {
+        name: 'textWrapper';
+    };
+}
+
+// @public (undocumented)
+type TransformerProvider<T> = (schema: Schema) => Transformer_2<T>;
+
+// @public (undocumented)
+type UIAEP<Action, ActionSubject, ActionSubjectID, Attributes> = AEP<Action, ActionSubject, ActionSubjectID, Attributes, EVENT_TYPE.UI>;
+
+// @public (undocumented)
+type VisitLinkAEP = AEP<ACTION.VISITED, ACTION_SUBJECT.LINK, undefined, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+}, EVENT_TYPE.TRACK>;
+
+// @public (undocumented)
+type VisitMediaLinkAEP = AEP<ACTION.VISITED, ACTION_SUBJECT.MEDIA, ACTION_SUBJECT_ID.LINK, {
+    platform: PLATFORM.WEB;
+    mode: MODE.RENDERER;
+}, EVENT_TYPE.TRACK>;
+
+// (No @packageDocumentation comment for this package)
+
+```