@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -0,0 +1,544 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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; })(); }
+/* 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';
+var getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var 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;
+};
+var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
+  var map = TableMap.get(table);
+  return map.width;
+};
+var gutterPadding = akEditorGutterPaddingDynamic() * 2;
+var COLUMN_MIN_WIDTH = 48;
+export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
+  return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
+    exposure: true
+  });
+};
+export var isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
+  return isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
+    exposure: true
+  });
+};
+export var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
+  if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
+    return children;
+  }
+  var order = tableOrderStatus.order,
+    columnIndex = tableOrderStatus.columnIndex;
+  var compareNodesInOrder = createCompareNodes({
+    getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
+      var _ref = attrs,
+        url = _ref.url;
+      if (!url) {
+        return null;
+      }
+      return smartCardStorage.get(url) || null;
+    }
+  }, order);
+  var tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
+  var tableArrayWithChildren = tableArray.map(function (rowNodes, index) {
+    return {
+      rowNodes: rowNodes,
+      rowReact: children[index]
+    };
+  });
+  var headerRow = tableArrayWithChildren.shift();
+  var sortedTable = tableArrayWithChildren.sort(function (rowA, rowB) {
+    return compareNodesInOrder(rowA.rowNodes[columnIndex], rowB.rowNodes[columnIndex]);
+  });
+  if (headerRow) {
+    sortedTable.unshift(headerRow);
+  }
+  return sortedTable.map(function (elem) {
+    return elem.rowReact;
+  });
+};
+export var hasRowspan = function hasRowspan(row) {
+  var hasRowspan = false;
+  row.forEach(function (cell) {
+    return hasRowspan = hasRowspan || cell.attrs.rowspan > 1;
+  });
+  return hasRowspan;
+};
+export var getRefTop = function getRefTop(refElement) {
+  return Math.round(refElement.getBoundingClientRect().top);
+};
+export var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
+  return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
+};
+export var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
+  return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
+};
+export var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
+  return React.Children.map(rows, function (row, index) {
+    if (index === 0) {
+      return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
+        tableOrderStatus: tableOrderStatus,
+        onSorting: onSorting
+      });
+    }
+    return row;
+  });
+};
+export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+  if (!rows.length) {
+    return false;
+  }
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var children = rows[0].props.children;
+  if (!children.length) {
+    return false;
+  }
+  if (children.length === 1) {
+    return children[0].type === TableHeader;
+  }
+  return children.every(function (node) {
+    return node.type === TableHeader;
+  });
+};
+export var tableCanBeSticky = function 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 var TableContainer = /*#__PURE__*/function (_React$Component) {
+  function TableContainer() {
+    var _this;
+    _classCallCheck(this, TableContainer);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TableContainer, [].concat(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", function (entries) {
+      var wrapperWidth = _this.state.wrapperWidth;
+      var headerRowHeight = _this.state.headerRowHeight;
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.target === _this.wrapperRef.current) {
+            wrapperWidth = entry.contentRect.width;
+          } else if (entry.target === _this.stickyHeaderRef.current) {
+            headerRowHeight = Math.round(entry.contentRect.height);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
+        _this.setState({
+          wrapperWidth: wrapperWidth,
+          headerRowHeight: headerRowHeight
+        });
+      }
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
+      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", function () {
+      var stickyHeaders = _this.props.stickyHeaders;
+      var offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
+      return (_this.overflowParent ? _this.overflowParent.top : 0) + offsetTop;
+    });
+    _defineProperty(_this, "updateSticky", function () {
+      var tableElem = _this.tableRef.current;
+      var refElem = _this.stickyHeaderRef.current;
+      if (!tableElem || !refElem) {
+        return;
+      }
+      var scrollTop = _this.getScrollTop() + tableStickyPadding;
+      var tableTop = getRefTop(tableElem);
+      var tableBottom = tableTop + tableElem.clientHeight;
+      var shouldSticky = shouldHeaderStick(scrollTop, tableTop, tableBottom, refElem.clientHeight);
+      var shouldPin = shouldHeaderPinBottom(scrollTop, tableBottom, refElem.clientHeight);
+      var stickyMode = 'none';
+      if (shouldPin) {
+        stickyMode = 'pin-bottom';
+      } else if (shouldSticky) {
+        stickyMode = 'stick';
+      }
+      if (_this.state.stickyMode !== stickyMode) {
+        _this.setState({
+          stickyMode: stickyMode
+        });
+      }
+      _this.nextFrame = undefined;
+    });
+    _defineProperty(_this, "onScroll", function () {
+      if (!_this.nextFrame) {
+        _this.nextFrame = requestAnimationFrame(_this.updateSticky);
+      }
+    });
+    _defineProperty(_this, "onWrapperScrolled", function () {
+      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", function (children) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return React.Children.map(children || false, function (child, idx) {
+        if (idx === 0 && /*#__PURE__*/React.isValidElement(child)) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            innerRef: _this.stickyHeaderRef
+          });
+        }
+        return child;
+      });
+    });
+    return _this;
+  }
+  _inherits(TableContainer, _React$Component);
+  return _createClass(TableContainer, [{
+    key: "componentDidMount",
+    value: function 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);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function 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();
+      }
+    }
+  }, {
+    key: "pinTop",
+    get: function get() {
+      if (!this.tableRef.current || !this.stickyHeaderRef.current) {
+        return;
+      }
+      return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
+    }
+  }, {
+    key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
+    get: function get() {
+      // 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;
+    }
+  }, {
+    key: "stickyTop",
+    get: function get() {
+      switch (this.state.stickyMode) {
+        case 'pin-bottom':
+          return this.pinTop;
+        case 'stick':
+          var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          if (typeof offsetTop === 'number' && this.shouldAddOverflowParentOffsetTop_DO_NOT_USE) {
+            var overflowParentOffsetTop = this.overflowParent ? this.overflowParent.top : 0;
+            return offsetTop + overflowParentOffsetTop;
+          } else {
+            return offsetTop;
+          }
+        default:
+          return undefined;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$tableRef$curren;
+      var _this$props = this.props,
+        isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
+        layout = _this$props.layout,
+        renderWidth = _this$props.renderWidth,
+        columnWidths = _this$props.columnWidths,
+        stickyHeaders = _this$props.stickyHeaders,
+        tableNode = _this$props.tableNode,
+        rendererAppearance = _this$props.rendererAppearance,
+        isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
+        isInsideOfTable = _this$props.isInsideOfTable,
+        isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
+        allowTableResizing = _this$props.allowTableResizing,
+        isPresentational = _this$props.isPresentational;
+      var stickyMode = this.state.stickyMode;
+      var tableWidthAttribute = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "".concat(tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width, "px") : "100%";
+      var children = React.Children.toArray(this.props.children);
+      var 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
+      var 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 - ".concat(gutterPadding, "px) ").concat(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: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+          position: 'relative',
+          userSelect: 'auto',
+          boxSizing: 'border-box'
+        }, '--ak-editor-table-gutter-padding', "".concat(gutterPadding, "px")), '--ak-editor-table-max-width', "1800px"), '--ak-editor-table-min-width', "".concat(tableMinWidth, "px")), "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)), ".concat(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: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(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"
+      }))))));
+    }
+  }]);
+}(React.Component);
+// Ignored via go/ees005
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
+  function TableProcessorWithContainerStyles() {
+    var _this2;
+    _classCallCheck(this, TableProcessorWithContainerStyles);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _callSuper(this, TableProcessorWithContainerStyles, [].concat(args));
+    _defineProperty(_this2, "state", {
+      tableOrderStatus: undefined
+    });
+    // adds sortable + re-orders children
+    _defineProperty(_this2, "addSortableColumn", function (childrenArray) {
+      var _this2$props = _this2.props,
+        tableNode = _this2$props.tableNode,
+        allowColumnSorting = _this2$props.allowColumnSorting,
+        smartCardStorage = _this2$props.smartCardStorage;
+      var tableOrderStatus = _this2.state.tableOrderStatus;
+      if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !hasMergedCell(tableNode)) {
+        return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
+      }
+      return childrenArray;
+    });
+    _defineProperty(_this2, "changeSortOrder", function (columnIndex, sortOrder) {
+      _this2.setState({
+        tableOrderStatus: {
+          columnIndex: columnIndex,
+          order: sortOrder
+        }
+      });
+    });
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _defineProperty(_this2, "addNumberColumnIndexes", function (rows) {
+      var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
+      var headerRowEnabled = isHeaderRowEnabled(rows);
+      return React.Children.map(rows, function (row, index) {
+        return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
+          isNumberColumnEnabled: isNumberColumnEnabled,
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+        });
+      });
+    });
+    return _this2;
+  }
+  _inherits(TableProcessorWithContainerStyles, _React$Component2);
+  return _createClass(TableProcessorWithContainerStyles, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      if (!children) {
+        return null;
+      }
+      var childrenArray = React.Children.toArray(children);
+      var 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);
+    }
+  }]);
+}(React.Component);

package/dist/esm/ui/Expand.js

@@ -1,10 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["expanded"],
-  _excluded2 = ["expanded"];
-var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["expanded"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -14,7 +11,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';
@@ -23,7 +20,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';
 var titleStyles = css({
   outline: 'none',
   border: 'none',
@@ -123,51 +119,23 @@ var contentContainerStylesNotExpanded = css({
     userSelect: 'none'
   }
 });
-var ContainerOld = function ContainerOld(props) {
-  var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  var styles = function styles() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t", "\n\t\tpadding: 0;\n\t\tpadding-bottom: ", ";\n\t"])), sharedContainerStyles(), 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)
-  );
-};
-var ContainerNew = function ContainerNew(props) {
+var 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'
+  }
+});
+var Container = function 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);
 };
-var Container = componentWithFG('platform_editor_emotion_refactor_renderer', ContainerNew, ContainerOld);
-var TitleContainerOld = function TitleContainerOld(props) {
-  var 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
-  var styles = function styles() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t", "\n\t\tpadding: ", ";\n\t\tpadding-bottom: ", ";\n\t"])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
-  };
+var TitleContainer = function TitleContainer(props) {
   var expanded = props.expanded,
     buttonProps = _objectWithoutProperties(props, _excluded);
-  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)
-  );
-};
-var TitleContainerNew = function TitleContainerNew(props) {
-  var expanded = props.expanded,
-    buttonProps = _objectWithoutProperties(props, _excluded2);
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-html-button
     jsx("button", _extends({
@@ -178,32 +146,14 @@ var TitleContainerNew = function TitleContainerNew(props) {
     }, buttonProps), props.children)
   );
 };
-var TitleContainer = componentWithFG('platform_editor_emotion_refactor_renderer', TitleContainerNew, TitleContainerOld);
 TitleContainer.displayName = 'TitleContainerButton';
-var ContentContainerOld = function ContentContainerOld(props) {
-  var sharedContentStyles = sharedExpandStyles.contentStyles(props);
-  var visibility = props.expanded ? 'visible' : 'hidden';
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
-  var styles = function styles() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tvisibility: ", ";\n\t"])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", 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)
-  );
-};
-var ContentContainerNew = function ContentContainerNew(props) {
+var ContentContainer = function 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);
 };
-var ContentContainer = componentWithFG('platform_editor_emotion_refactor_renderer', ContentContainerNew, ContentContainerOld);
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;