@atlaskit/renderer 114.11.1 → 114.12.0

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/ui/Expand.js

@@ -8,7 +8,7 @@ import { css, jsx } from '@emotion/react';
 import React, { useCallback, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { clearNextSiblingMarginTopStyle, ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, sharedExpandStyles, WidthProvider } from '@atlaskit/editor-common/ui';
+import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthProvider } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
@@ -17,7 +17,6 @@ import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 const titleStyles = css({
   outline: 'none',
   border: 'none',
@@ -117,55 +116,21 @@ const contentContainerStylesNotExpanded = css({
     userSelect: 'none'
   }
 });
-const ContainerOld = props => {
-  const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  const styles = () => css`
-		${sharedContainerStyles()}
-		padding: 0;
-		padding-bottom: ${paddingBottom};
-	`;
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
-    jsx("div", _extends({
-      css: styles
-    }, props), props.children)
-  );
-};
-const ContainerNew = props => {
+const clearNextSiblingMarginTopStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+});
+const Container = props => {
   return jsx("div", _extends({
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-const Container = componentWithFG('platform_editor_emotion_refactor_renderer', ContainerNew, ContainerOld);
-const TitleContainerOld = props => {
-  const paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  const styles = () => css`
-		${sharedExpandStyles.titleContainerStyles()}
-		padding: ${"var(--ds-space-100, 8px)"};
-		padding-bottom: ${paddingBottom};
-	`;
-  const {
-    expanded,
-    ...buttonProps
-  } = props;
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-html-button
-    jsx("button", _extends({
-      type: "button",
-      css: styles
-    }, buttonProps), props.children)
-  );
-};
-const TitleContainerNew = props => {
+const TitleContainer = props => {
   const {
     expanded,
     ...buttonProps
@@ -180,35 +145,14 @@ const TitleContainerNew = props => {
     }, buttonProps), props.children)
   );
 };
-const TitleContainer = componentWithFG('platform_editor_emotion_refactor_renderer', TitleContainerNew, TitleContainerOld);
 TitleContainer.displayName = 'TitleContainerButton';
-const ContentContainerOld = props => {
-  const sharedContentStyles = sharedExpandStyles.contentStyles(props);
-  const visibility = props.expanded ? 'visible' : 'hidden';
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
-  const styles = () => css`
-		${sharedContentStyles()};
-		padding-right: ${"var(--ds-space-200, 16px)"};
-		padding-left: ${"var(--ds-space-400, 32px)"};
-		visibility: ${visibility};
-	`;
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
-    jsx("div", _extends({
-      css: styles
-    }, props), props.children)
-  );
-};
-const ContentContainerNew = props => {
+const ContentContainer = props => {
   return jsx("div", _extends({
     css: [contentContainerStyles, props.expanded && contentContainerStylesExpanded, !props.expanded && contentContainerStylesNotExpanded]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-const ContentContainer = componentWithFG('platform_editor_emotion_refactor_renderer', ContentContainerNew, ContentContainerOld);
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;