@atlaskit/renderer 120.2.0 → 120.2.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 120.2.2
+
+### Patch Changes
+
+- [#188983](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188983)
+  [`4db0e4a06b450`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4db0e4a06b450) -
+  EDITOR-1122: Fix telepointer not updating when childList is mutated instead of characterData.
+  Behind platform_editor_ai_iw_adf_streaming
+- Updated dependencies
+
+## 120.2.1
+
+### Patch Changes
+
+- [#190087](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190087)
+  [`3a050d48dee0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a050d48dee0c) -
+  [ux] [CONFCLOUD-82045] Fixes regression where numbered take up too much space inside include
+  macros
+- [#190422](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190422)
+  [`232f2b56060b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/232f2b56060b1) -
+  [ENGHEALTH-27833] Make table's with overflow scrolling a labelled focusable region that users can
+  tab to so keyboard users can navigate the scrollable region
+- Updated dependencies
+
 ## 120.2.0
 
 ### Minor Changes

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

@@ -73,7 +73,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing = props.allowTableResizing,
     isTopLevelRenderer = props.isTopLevelRenderer;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(function (width) {
+    return width === 0;
+  }) && (0, _platformFeatureFlags.fg)('platform_editor_numbered_column_in_include')) {
     return [];
   }
   var tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -14,7 +14,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _styles = require("@atlaskit/editor-common/styles");
+var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -123,6 +125,41 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
     return node.type === _tableCell.TableHeader;
   });
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+var TableWrapper = function TableWrapper(_ref2) {
+  var children = _ref2.children,
+    wrapperRef = _ref2.wrapperRef,
+    onScroll = _ref2.onScroll,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
+  }, children);
+};
 var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -515,7 +552,24 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
+      }, [children && children[0]]), (0, _platformFeatureFlags.fg)('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
+        wrapperRef: this.wrapperRef,
+        onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+        stickyHeaders: stickyHeaders
+      }, /*#__PURE__*/_react.default.createElement(_table.Table, {
+        innerRef: this.tableRef,
+        columnWidths: columnWidths,
+        layout: layout,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        renderWidth: renderWidth,
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing,
+        isPresentational: isPresentational
+      }, this.grabFirstRowRef(children))) : /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -673,9 +727,9 @@ var TableWithWidth = function TableWithWidth(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , props);
   } else {
-    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
-      var width = _ref2.width;
+      var width = _ref3.width;
       var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
       var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
         return total + val;

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

@@ -51,6 +51,7 @@ var _getBaseFontSize = require("./get-base-font-size");
 var _rendererHelper = require("./rendererHelper");
 var _useMemoFromPropsDerivative = require("./useMemoFromPropsDerivative");
 var _PortalContext = require("./PortalContext");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _excluded = ["portal"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -62,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.1.11";
+var packageVersion = "120.2.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -570,7 +571,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
-        mutations.forEach(function (mutation) {
+        mutations.forEach(function (mutation, index) {
+          var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             var oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
             if (oldTelepointer) {
@@ -592,6 +594,33 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
               parentNode.appendChild(createTelepointer());
             }
           }
+
+          /**
+           * When streaming ADF content, we may receive mutations where nodes get
+           * replaced, rather than have characterData updated.
+           *
+           * Telepointer changes will also cause a childList mutation, so we manually ignore it.
+           * Telepointer changes are always a singular node-adds or node-removes.
+           */
+          if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_ai_iw_adf_streaming', 'isEnabled', true) && mutation.type === 'childList' && !(mutation.addedNodes.length === 1 && ((_mutation$addedNodes$ = mutation.addedNodes[0]) === null || _mutation$addedNodes$ === void 0 ? void 0 : _mutation$addedNodes$.id) === _style.TELEPOINTER_ID || mutation.removedNodes.length === 1 && ((_mutation$removedNode = mutation.removedNodes[0]) === null || _mutation$removedNode === void 0 ? void 0 : _mutation$removedNode.id) === _style.TELEPOINTER_ID)) {
+            var _lastChild2 = _renderer.lastChild;
+            if (_lastChild2) {
+              /**
+               * We want to place telepointer inside content (which has data-renderer-start-pos) and
+               * inside lines in codeblocks (which have data-ds--code--row).
+               */
+              var contentElements = _lastChild2.querySelectorAll('[data-renderer-start-pos],[data-ds--code--row]');
+              var lastElement = contentElements[contentElements.length - 1];
+              var _oldTelepointer2 = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+              if (lastElement) {
+                _oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
+                lastElement === null || lastElement === void 0 || lastElement.appendChild(createTelepointer());
+              } else {
+                _oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
+                _lastChild2 === null || _lastChild2 === void 0 || _lastChild2.appendChild(createTelepointer());
+              }
+            }
+          }
         });
       };
       var observer = new MutationObserver(mutateTelepointer);

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

@@ -61,7 +61,7 @@ const renderScaleDownColgroup = props => {
     allowTableResizing,
     isTopLevelRenderer
   } = props;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(width => width === 0) && fg('platform_editor_numbered_column_in_include')) {
     return [];
   }
   const tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { tableMessages } from '@atlaskit/editor-common/messages';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -92,6 +94,43 @@ export const isHeaderRowEnabled = rows => {
   }
   return children.every(node => node.type === TableHeader);
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+const TableWrapper = ({
+  children,
+  wrapperRef,
+  onScroll,
+  stickyHeaders
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(tableMessages.tableScrollRegion)
+  }, children);
+};
 export const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -456,7 +495,24 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       allowTableResizing: allowTableResizing
-    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+    }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+      wrapperRef: this.wrapperRef,
+      onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+      stickyHeaders: stickyHeaders
+    }, /*#__PURE__*/React.createElement(Table, {
+      innerRef: this.tableRef,
+      columnWidths: columnWidths,
+      layout: layout,
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      renderWidth: renderWidth,
+      tableNode: tableNode,
+      rendererAppearance: rendererAppearance,
+      isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfTable: isInsideOfTable,
+      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+      allowTableResizing: allowTableResizing,
+      isPresentational: isPresentational
+    }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
       ref: this.wrapperRef,

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

@@ -45,10 +45,11 @@ import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
 import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
 import { PortalContext } from './PortalContext';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "120.1.11";
+const packageVersion = "120.2.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -556,7 +557,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       const mutateTelepointer = mutations => {
-        mutations.forEach(mutation => {
+        mutations.forEach((mutation, index) => {
+          var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
             if (oldTelepointer) {
@@ -578,6 +580,33 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
               parentNode.appendChild(createTelepointer());
             }
           }
+
+          /**
+           * When streaming ADF content, we may receive mutations where nodes get
+           * replaced, rather than have characterData updated.
+           *
+           * Telepointer changes will also cause a childList mutation, so we manually ignore it.
+           * Telepointer changes are always a singular node-adds or node-removes.
+           */
+          if (expValEqualsNoExposure('platform_editor_ai_iw_adf_streaming', 'isEnabled', true) && mutation.type === 'childList' && !(mutation.addedNodes.length === 1 && ((_mutation$addedNodes$ = mutation.addedNodes[0]) === null || _mutation$addedNodes$ === void 0 ? void 0 : _mutation$addedNodes$.id) === TELEPOINTER_ID || mutation.removedNodes.length === 1 && ((_mutation$removedNode = mutation.removedNodes[0]) === null || _mutation$removedNode === void 0 ? void 0 : _mutation$removedNode.id) === TELEPOINTER_ID)) {
+            const lastChild = renderer.lastChild;
+            if (lastChild) {
+              /**
+               * We want to place telepointer inside content (which has data-renderer-start-pos) and
+               * inside lines in codeblocks (which have data-ds--code--row).
+               */
+              const contentElements = lastChild.querySelectorAll('[data-renderer-start-pos],[data-ds--code--row]');
+              const lastElement = contentElements[contentElements.length - 1];
+              const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
+              if (lastElement) {
+                oldTelepointer === null || oldTelepointer === void 0 ? void 0 : oldTelepointer.remove();
+                lastElement === null || lastElement === void 0 ? void 0 : lastElement.appendChild(createTelepointer());
+              } else {
+                oldTelepointer === null || oldTelepointer === void 0 ? void 0 : oldTelepointer.remove();
+                lastChild === null || lastChild === void 0 ? void 0 : lastChild.appendChild(createTelepointer());
+              }
+            }
+          }
         });
       };
       const observer = new MutationObserver(mutateTelepointer);

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

@@ -67,7 +67,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing = props.allowTableResizing,
     isTopLevelRenderer = props.isTopLevelRenderer;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(function (width) {
+    return width === 0;
+  }) && fg('platform_editor_numbered_column_in_include')) {
     return [];
   }
   var tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -12,7 +12,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { tableMessages } from '@atlaskit/editor-common/messages';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -116,6 +118,41 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
     return node.type === TableHeader;
   });
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+var TableWrapper = function TableWrapper(_ref2) {
+  var children = _ref2.children,
+    wrapperRef = _ref2.wrapperRef,
+    onScroll = _ref2.onScroll,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(tableMessages.tableScrollRegion)
+  }, children);
+};
 export var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -508,7 +545,24 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+      }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+        wrapperRef: this.wrapperRef,
+        onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+        stickyHeaders: stickyHeaders
+      }, /*#__PURE__*/React.createElement(Table, {
+        innerRef: this.tableRef,
+        columnWidths: columnWidths,
+        layout: layout,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        renderWidth: renderWidth,
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing,
+        isPresentational: isPresentational
+      }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -668,9 +722,9 @@ var TableWithWidth = function TableWithWidth(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , props);
   } else {
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
-      var width = _ref2.width;
+      var width = _ref3.width;
       var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
       var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
         return total + val;

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

@@ -50,10 +50,11 @@ import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
 import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
 import { PortalContext } from './PortalContext';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.1.11";
+var packageVersion = "120.2.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -561,7 +562,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
-        mutations.forEach(function (mutation) {
+        mutations.forEach(function (mutation, index) {
+          var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             var oldTelepointer = _renderer.querySelector("#".concat(TELEPOINTER_ID));
             if (oldTelepointer) {
@@ -583,6 +585,33 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
               parentNode.appendChild(createTelepointer());
             }
           }
+
+          /**
+           * When streaming ADF content, we may receive mutations where nodes get
+           * replaced, rather than have characterData updated.
+           *
+           * Telepointer changes will also cause a childList mutation, so we manually ignore it.
+           * Telepointer changes are always a singular node-adds or node-removes.
+           */
+          if (expValEqualsNoExposure('platform_editor_ai_iw_adf_streaming', 'isEnabled', true) && mutation.type === 'childList' && !(mutation.addedNodes.length === 1 && ((_mutation$addedNodes$ = mutation.addedNodes[0]) === null || _mutation$addedNodes$ === void 0 ? void 0 : _mutation$addedNodes$.id) === TELEPOINTER_ID || mutation.removedNodes.length === 1 && ((_mutation$removedNode = mutation.removedNodes[0]) === null || _mutation$removedNode === void 0 ? void 0 : _mutation$removedNode.id) === TELEPOINTER_ID)) {
+            var _lastChild2 = _renderer.lastChild;
+            if (_lastChild2) {
+              /**
+               * We want to place telepointer inside content (which has data-renderer-start-pos) and
+               * inside lines in codeblocks (which have data-ds--code--row).
+               */
+              var contentElements = _lastChild2.querySelectorAll('[data-renderer-start-pos],[data-ds--code--row]');
+              var lastElement = contentElements[contentElements.length - 1];
+              var _oldTelepointer2 = _renderer.querySelector("#".concat(TELEPOINTER_ID));
+              if (lastElement) {
+                _oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
+                lastElement === null || lastElement === void 0 || lastElement.appendChild(createTelepointer());
+              } else {
+                _oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
+                _lastChild2 === null || _lastChild2 === void 0 || _lastChild2.appendChild(createTelepointer());
+              }
+            }
+          }
         });
       };
       var observer = new MutationObserver(mutateTelepointer);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "120.2.0",
+	"version": "120.2.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.9.0",
+		"@atlaskit/editor-common": "^107.11.0",
 		"@atlaskit/link-provider": "^3.4.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -190,6 +190,9 @@
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
 		},
+		"editor_enghealth_focusable_scrollable_tables": {
+			"type": "boolean"
+		},
 		"platform_editor_comments_api_manager": {
 			"type": "boolean"
 		},
@@ -270,6 +273,9 @@
 		},
 		"platform_editor_avatar_group_margin_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_numbered_column_in_include": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {