@atlaskit/renderer 114.11.2 → 114.12.1

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

@@ -0,0 +1,501 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { TableHeader } from './tableCell';
+import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
+import { Table } from './table/table';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { isCommentAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
+const getResizerMinWidth = node => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
+};
+const getColgroupChildrenLength = table => {
+  const map = TableMap.get(table);
+  return map.width;
+};
+const gutterPadding = akEditorGutterPaddingDynamic() * 2;
+const COLUMN_MIN_WIDTH = 48;
+export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
+  exposure: true
+});
+export const isStickyScrollbarEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
+  exposure: true
+});
+export const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
+  if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
+    return children;
+  }
+  const {
+    order,
+    columnIndex
+  } = tableOrderStatus;
+  const compareNodesInOrder = createCompareNodes({
+    getInlineCardTextFromStore(attrs) {
+      const {
+        url
+      } = attrs;
+      if (!url) {
+        return null;
+      }
+      return smartCardStorage.get(url) || null;
+    }
+  }, order);
+  const tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
+  const tableArrayWithChildren = tableArray.map((rowNodes, index) => ({
+    rowNodes,
+    rowReact: children[index]
+  }));
+  const headerRow = tableArrayWithChildren.shift();
+  const sortedTable = tableArrayWithChildren.sort((rowA, rowB) => compareNodesInOrder(rowA.rowNodes[columnIndex], rowB.rowNodes[columnIndex]));
+  if (headerRow) {
+    sortedTable.unshift(headerRow);
+  }
+  return sortedTable.map(elem => elem.rowReact);
+};
+export const hasRowspan = row => {
+  let hasRowspan = false;
+  row.forEach(cell => hasRowspan = hasRowspan || cell.attrs.rowspan > 1);
+  return hasRowspan;
+};
+export const getRefTop = refElement => {
+  return Math.round(refElement.getBoundingClientRect().top);
+};
+export const shouldHeaderStick = (scrollTop, tableTop, tableBottom, rowHeight) => tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
+export const shouldHeaderPinBottom = (scrollTop, tableBottom, rowHeight) => tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
+export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
+  return React.Children.map(rows, (row, index) => {
+    if (index === 0) {
+      return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
+        tableOrderStatus,
+        onSorting
+      });
+    }
+    return row;
+  });
+};
+export const isHeaderRowEnabled = rows => {
+  if (!rows.length) {
+    return false;
+  }
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const {
+    children
+  } = rows[0].props;
+  if (!children.length) {
+    return false;
+  }
+  if (children.length === 1) {
+    return children[0].type === TableHeader;
+  }
+  return children.every(node => node.type === TableHeader);
+};
+export const tableCanBeSticky = (node, children) => {
+  return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
+};
+// Ignored via go/ees005
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class TableContainer extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
+    });
+    _defineProperty(this, "tableRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "stickyHeaderRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "stickyScrollbarRef", /*#__PURE__*/React.createRef());
+    // used for sync scroll + copying wrapper width to sticky header
+    _defineProperty(this, "stickyWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "overflowParent", null);
+    _defineProperty(this, "updatedLayout", 'custom');
+    _defineProperty(this, "resizeObserver", null);
+    _defineProperty(this, "applyResizerChange", entries => {
+      let wrapperWidth = this.state.wrapperWidth;
+      let headerRowHeight = this.state.headerRowHeight;
+      for (const entry of entries) {
+        if (entry.target === this.wrapperRef.current) {
+          wrapperWidth = entry.contentRect.width;
+        } else if (entry.target === this.stickyHeaderRef.current) {
+          headerRowHeight = Math.round(entry.contentRect.height);
+        }
+      }
+      if (headerRowHeight !== this.state.headerRowHeight || wrapperWidth !== this.state.wrapperWidth) {
+        this.setState({
+          wrapperWidth,
+          headerRowHeight
+        });
+      }
+    });
+    _defineProperty(this, "componentWillUnmount", () => {
+      if (this.overflowParent) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.overflowParent.removeEventListener('scroll', this.onScroll);
+      }
+      if (this.nextFrame) {
+        cancelAnimationFrame(this.nextFrame);
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      if (this.stickyScrollbar) {
+        this.stickyScrollbar.dispose();
+      }
+    });
+    _defineProperty(this, "getScrollTop", () => {
+      const {
+        stickyHeaders
+      } = this.props;
+      const offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
+      return (this.overflowParent ? this.overflowParent.top : 0) + offsetTop;
+    });
+    _defineProperty(this, "updateSticky", () => {
+      const tableElem = this.tableRef.current;
+      const refElem = this.stickyHeaderRef.current;
+      if (!tableElem || !refElem) {
+        return;
+      }
+      const scrollTop = this.getScrollTop() + tableStickyPadding;
+      const tableTop = getRefTop(tableElem);
+      const tableBottom = tableTop + tableElem.clientHeight;
+      const shouldSticky = shouldHeaderStick(scrollTop, tableTop, tableBottom, refElem.clientHeight);
+      const shouldPin = shouldHeaderPinBottom(scrollTop, tableBottom, refElem.clientHeight);
+      let stickyMode = 'none';
+      if (shouldPin) {
+        stickyMode = 'pin-bottom';
+      } else if (shouldSticky) {
+        stickyMode = 'stick';
+      }
+      if (this.state.stickyMode !== stickyMode) {
+        this.setState({
+          stickyMode
+        });
+      }
+      this.nextFrame = undefined;
+    });
+    _defineProperty(this, "onScroll", () => {
+      if (!this.nextFrame) {
+        this.nextFrame = requestAnimationFrame(this.updateSticky);
+      }
+    });
+    _defineProperty(this, "onWrapperScrolled", () => {
+      if (!this.wrapperRef.current || !this.stickyWrapperRef.current) {
+        return;
+      }
+      this.stickyWrapperRef.current.scrollLeft = this.wrapperRef.current.scrollLeft;
+      if (this.stickyScrollbarRef.current) {
+        this.stickyScrollbarRef.current.scrollLeft = this.wrapperRef.current.scrollLeft;
+      }
+    });
+    _defineProperty(this, "grabFirstRowRef", children => {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return React.Children.map(children || false, (child, idx) => {
+        if (idx === 0 && /*#__PURE__*/React.isValidElement(child)) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            innerRef: this.stickyHeaderRef
+          });
+        }
+        return child;
+      });
+    });
+  }
+  componentDidMount() {
+    this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+    if (this.wrapperRef.current) {
+      this.resizeObserver.observe(this.wrapperRef.current);
+    }
+    if (this.stickyHeaderRef.current) {
+      this.resizeObserver.observe(this.stickyHeaderRef.current);
+    }
+    if (this.props.stickyHeaders) {
+      var _this$props$stickyHea;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRootId_DO_NOT_USE);
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.overflowParent.addEventListener('scroll', this.onScroll);
+    }
+    if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
+      this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    // toggling sticky headers visiblity
+    if (this.props.stickyHeaders && !this.overflowParent) {
+      var _this$props$stickyHea2;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRootId_DO_NOT_USE);
+    } else if (!this.props.stickyHeaders && this.overflowParent) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.overflowParent.removeEventListener('scroll', this.onScroll);
+      this.overflowParent = null;
+    }
+
+    // offsetTop might have changed, re-position sticky header
+    if (this.props.stickyHeaders !== prevProps.stickyHeaders) {
+      this.updateSticky();
+    }
+
+    // sync horizontal scroll in floating div when toggling modes
+    if (prevState.stickyMode !== this.state.stickyMode) {
+      this.onWrapperScrolled();
+    }
+  }
+  get pinTop() {
+    if (!this.tableRef.current || !this.stickyHeaderRef.current) {
+      return;
+    }
+    return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
+  }
+  get shouldAddOverflowParentOffsetTop_DO_NOT_USE() {
+    // IF the StickyHeaderConfig specifies that the default scroll root offsetTop should be added
+    // AND the StickyHeaderConfig specifies a default scroll root id
+    // AND the OverflowParent is the corresponding element
+    // THEN we should add the OverflowParent offset top (RETURN TRUE)
+    return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
+  }
+  get stickyTop() {
+    switch (this.state.stickyMode) {
+      case 'pin-bottom':
+        return this.pinTop;
+      case 'stick':
+        const offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+        if (typeof offsetTop === 'number' && this.shouldAddOverflowParentOffsetTop_DO_NOT_USE) {
+          const overflowParentOffsetTop = this.overflowParent ? this.overflowParent.top : 0;
+          return offsetTop + overflowParentOffsetTop;
+        } else {
+          return offsetTop;
+        }
+      default:
+        return undefined;
+    }
+  }
+  render() {
+    var _this$tableRef$curren;
+    const {
+      isNumberColumnEnabled,
+      layout,
+      renderWidth,
+      columnWidths,
+      stickyHeaders,
+      tableNode,
+      rendererAppearance,
+      isInsideOfBlockNode,
+      isInsideOfTable,
+      isinsideMultiBodiedExtension,
+      allowTableResizing,
+      isPresentational
+    } = this.props;
+    const {
+      stickyMode
+    } = this.state;
+    const tableWidthAttribute = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? `${tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width}px` : `100%`;
+    const children = React.Children.toArray(this.props.children);
+    let tableMinWidth;
+    if (tableNode) {
+      tableMinWidth = getResizerMinWidth(tableNode);
+    }
+
+    // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+    // This check caters for those tables and helps with SSR logic
+    const isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+    if (isFullWidth) {
+      this.updatedLayout = 'full-width';
+      // if table has width explicity set, ensure SSR is handled
+    } else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
+      this.updatedLayout = 'custom';
+    } else {
+      this.updatedLayout = layout;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      className: "table-alignment-container"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      className: "pm-table-resizer-container"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        width: `min(calc(100cqw - ${gutterPadding}px) ${tableWidthAttribute}`
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      className: "resizer-item display-handle",
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        position: 'relative',
+        userSelect: 'auto',
+        boxSizing: 'border-box',
+        ['--ak-editor-table-gutter-padding']: `${gutterPadding}px`,
+        ['--ak-editor-table-max-width']: `1800px`,
+        ['--ak-editor-table-min-width']: `${tableMinWidth}px`,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minWidth: 'var(--ak-editor-table-min-width)',
+        maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
+        width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "resizer-hover-zone"
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
+      "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
+      "data-layout": this.updatedLayout,
+      "data-testid": "table-container",
+      ref: this.props.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+      "data-testid": "sticky-scrollbar-sentinel-top"
+    }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      renderWidth: renderWidth,
+      tableWidth: "inherit",
+      layout: layout,
+      handleRef: this.props.handleRef,
+      shadowClassNames: this.props.shadowClassNames,
+      top: this.stickyTop,
+      mode: stickyMode,
+      innerRef: this.stickyWrapperRef,
+      wrapperWidth: this.state.wrapperWidth,
+      columnWidths: columnWidths,
+      rowHeight: this.state.headerRowHeight,
+      tableNode: tableNode,
+      rendererAppearance: rendererAppearance,
+      allowTableResizing: allowTableResizing
+    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
+      ref: this.wrapperRef,
+      "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
+      "data-layout": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout,
+      "data-autosize": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.__autoSize,
+      "data-table-local-id": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId,
+      "data-table-width": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width,
+      "data-vc": "table-node-wrapper",
+      onScroll: this.props.stickyHeaders && this.onWrapperScrolled
+    }, /*#__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))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+      ref: this.stickyScrollbarRef,
+      "data-vc": "table-sticky-scrollbar-container",
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: "var(--ds-space-250, 20px)",
+        // MAX_BROWSER_SCROLLBAR_HEIGHT
+        // Follow editor to hide by default so it does not show empty gap in SSR
+        // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        display: 'block',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: '100%'
+      }
+    })), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+      "data-testid": "sticky-scrollbar-sentinel-bottom"
+    }))))));
+  }
+}
+// Ignored via go/ees005
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class TableProcessorWithContainerStyles extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      tableOrderStatus: undefined
+    });
+    // adds sortable + re-orders children
+    _defineProperty(this, "addSortableColumn", childrenArray => {
+      const {
+        tableNode,
+        allowColumnSorting,
+        smartCardStorage
+      } = this.props;
+      const {
+        tableOrderStatus
+      } = this.state;
+      if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !hasMergedCell(tableNode)) {
+        return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, this.changeSortOrder);
+      }
+      return childrenArray;
+    });
+    _defineProperty(this, "changeSortOrder", (columnIndex, sortOrder) => {
+      this.setState({
+        tableOrderStatus: {
+          columnIndex,
+          order: sortOrder
+        }
+      });
+    });
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _defineProperty(this, "addNumberColumnIndexes", rows => {
+      const {
+        isNumberColumnEnabled
+      } = this.props;
+      const headerRowEnabled = isHeaderRowEnabled(rows);
+      return React.Children.map(rows, (row, index) => {
+        return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
+          isNumberColumnEnabled,
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+        });
+      });
+    });
+  }
+  render() {
+    const {
+      children
+    } = this.props;
+    if (!children) {
+      return null;
+    }
+    const childrenArray = React.Children.toArray(children);
+    const orderedChildren = compose(this.addNumberColumnIndexes, this.addSortableColumn
+    // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
+    )(childrenArray);
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return /*#__PURE__*/React.createElement(TableContainer, this.props, orderedChildren);
+  }
+}

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

@@ -1,18 +1,20 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
-import { useProvider } from '@atlaskit/editor-common/provider-factory';
+import { useProviderLayout, useProvider } from '@atlaskit/editor-common/provider-factory';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const EditorMediaClientProvider = ({
   children,
   ssr
 }) => {
   const [mediaClientConfig, setMediaClientConfig] = useState();
-  const mediaProvider = useProvider('mediaProvider');
+  const oldMediaProvider = useProvider('mediaProvider');
+  const mediaProvider = useProviderLayout('mediaProvider');
 
   /**
    * If a mediaClientConfig is provided then we will force
    * skip the mediaClient from context
    */
-  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
+  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || oldMediaProvider || mediaProvider);
   const contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -25,12 +27,25 @@ export const EditorMediaClientProvider = ({
   // and provide a top level mediaClient context
   // This is useful for testing and creating examples.
   useEffect(() => {
-    if (ssr !== null && ssr !== void 0 && ssr.config) {
-      setMediaClientConfig(ssr.config);
-    } else if (mediaProvider) {
-      mediaProvider.then(provider => {
-        setMediaClientConfig(provider.viewMediaClientConfig);
-      });
+    if (!fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (oldMediaProvider) {
+        oldMediaProvider.then(provider => {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
+    }
+  }, [oldMediaProvider, ssr]);
+  useLayoutEffect(() => {
+    if (fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (mediaProvider) {
+        mediaProvider.then(provider => {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -5,7 +5,6 @@ import { FullPagePadding } from './style';
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
- *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 export function BreakoutSSRInlineScript({
@@ -26,26 +25,25 @@ export function BreakoutSSRInlineScript({
     }
   }
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  const context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id
     // To investigate if we can replace this.
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: context
+      __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-export function createBreakoutInlineScript(id) {
+export function createBreakoutInlineScript(id, optionalFlagArg) {
   return `
 	 (function(window){
 		if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {
 			return;
 		}
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${Boolean(fg('platform-fix-table-ssr-resizing'))});
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false});
   })(window);
 `;
 }
@@ -62,7 +60,7 @@ export const breakoutInlineScriptContext = `
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
+function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -76,7 +74,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       element = element.parentElement;
     }
   }
-  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), elem => {
+  const renderer = findUp(document.querySelector(`[data-breakout-script-id="${id}"]`), elem => {
     var _elem$parentElement;
     return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
   });
@@ -88,7 +86,23 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
+      if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
+      }
 
+      // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       if (item.target.classList.contains('ak-renderer-document')) {
@@ -108,7 +122,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!shouldFixTableResizing) {
+          if (!isFeatureFlagEnabled) {
             if (node.classList.contains('pm-table-container') && mode === 'custom') {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -147,20 +161,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
             }
           }
         });
-      } else if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
       }
     });
   });

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

@@ -46,7 +46,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.11.2";
+const packageVersion = "114.12.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',