@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -0,0 +1,550 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.addSortableColumn = exports.TableProcessorWithContainerStyles = exports.TableContainer = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _types = require("@atlaskit/editor-common/types");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _tableCell = require("./tableCell");
+var _sticky = require("./table/sticky");
+var _table = require("./table/table");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _appearance = require("../utils/appearance");
+var _TableStickyScrollbar = require("./TableStickyScrollbar");
+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 = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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 */
+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.TableMap.get(table);
+  return map.width;
+};
+var gutterPadding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+var COLUMN_MIN_WIDTH = 48;
+var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+    exposure: true
+  });
+};
+var isStickyScrollbarEnabled = exports.isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) && (0, _experiments.editorExperiment)('platform_renderer_table_sticky_scrollbar', true, {
+    exposure: true
+  });
+};
+var orderChildren = exports.orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
+  if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
+    return children;
+  }
+  var order = tableOrderStatus.order,
+    columnIndex = tableOrderStatus.columnIndex;
+  var compareNodesInOrder = (0, _utils.createCompareNodes)({
+    getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
+      var _ref = attrs,
+        url = _ref.url;
+      if (!url) {
+        return null;
+      }
+      return smartCardStorage.get(url) || null;
+    }
+  }, order);
+  var tableArray = (0, _utils.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;
+  });
+};
+var hasRowspan = exports.hasRowspan = function hasRowspan(row) {
+  var hasRowspan = false;
+  row.forEach(function (cell) {
+    return hasRowspan = hasRowspan || cell.attrs.rowspan > 1;
+  });
+  return hasRowspan;
+};
+var getRefTop = exports.getRefTop = function getRefTop(refElement) {
+  return Math.round(refElement.getBoundingClientRect().top);
+};
+var shouldHeaderStick = exports.shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
+  return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
+};
+var shouldHeaderPinBottom = exports.shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
+  return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
+};
+var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
+  return _react.default.Children.map(rows, function (row, index) {
+    if (index === 0) {
+      return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
+        tableOrderStatus: tableOrderStatus,
+        onSorting: onSorting
+      });
+    }
+    return row;
+  });
+};
+var isHeaderRowEnabled = exports.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 === _tableCell.TableHeader;
+  }
+  return children.every(function (node) {
+    return node.type === _tableCell.TableHeader;
+  });
+};
+var tableCanBeSticky = exports.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
+var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Component) {
+  function TableContainer() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)(_this, "state", {
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
+    });
+    (0, _defineProperty2.default)(_this, "tableRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "stickyHeaderRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "stickyScrollbarRef", /*#__PURE__*/_react.default.createRef());
+    // used for sync scroll + copying wrapper width to sticky header
+    (0, _defineProperty2.default)(_this, "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "wrapperRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "overflowParent", null);
+    (0, _defineProperty2.default)(_this, "updatedLayout", 'custom');
+    (0, _defineProperty2.default)(_this, "resizeObserver", null);
+    (0, _defineProperty2.default)(_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
+        });
+      }
+    });
+    (0, _defineProperty2.default)(_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();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "getScrollTop", function () {
+      var stickyHeaders = _this.props.stickyHeaders;
+      var offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
+      return (_this.overflowParent ? _this.overflowParent.top : 0) + offsetTop;
+    });
+    (0, _defineProperty2.default)(_this, "updateSticky", function () {
+      var tableElem = _this.tableRef.current;
+      var refElem = _this.stickyHeaderRef.current;
+      if (!tableElem || !refElem) {
+        return;
+      }
+      var scrollTop = _this.getScrollTop() + _sticky.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;
+    });
+    (0, _defineProperty2.default)(_this, "onScroll", function () {
+      if (!_this.nextFrame) {
+        _this.nextFrame = requestAnimationFrame(_this.updateSticky);
+      }
+    });
+    (0, _defineProperty2.default)(_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;
+      }
+    });
+    (0, _defineProperty2.default)(_this, "grabFirstRowRef", function (children) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return _react.default.Children.map(children || false, function (child, idx) {
+        if (idx === 0 && /*#__PURE__*/_react.default.isValidElement(child)) {
+          return /*#__PURE__*/_react.default.cloneElement(child, {
+            innerRef: _this.stickyHeaderRef
+          });
+        }
+        return child;
+      });
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(TableContainer, _React$Component);
+  return (0, _createClass2.default)(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 = _sticky.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.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 = _sticky.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 + _styles.tableMarginTop - _sticky.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.default.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.default.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.default.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.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        className: "resizer-item display-handle",
+        style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+          // 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.default.createElement("span", {
+        className: "resizer-hover-zone"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: "".concat(_styles.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.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
+      }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.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.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
+        ref: this.wrapperRef,
+        "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.default.createElement(_table.Table, {
+        innerRef: this.tableRef,
+        columnWidths: columnWidths,
+        layout: layout,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        renderWidth: renderWidth,
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing,
+        isPresentational: isPresentational
+      }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_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.default.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.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }))))));
+    }
+  }]);
+}(_react.default.Component);
+// Ignored via go/ees005
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
+  function TableProcessorWithContainerStyles() {
+    var _this2;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)(_this2, "state", {
+      tableOrderStatus: undefined
+    });
+    // adds sortable + re-orders children
+    (0, _defineProperty2.default)(_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 && !(0, _utils.hasMergedCell)(tableNode)) {
+        return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
+      }
+      return childrenArray;
+    });
+    (0, _defineProperty2.default)(_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
+    (0, _defineProperty2.default)(_this2, "addNumberColumnIndexes", function (rows) {
+      var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
+      var headerRowEnabled = isHeaderRowEnabled(rows);
+      return _react.default.Children.map(rows, function (row, index) {
+        return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
+          isNumberColumnEnabled: isNumberColumnEnabled,
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+        });
+      });
+    });
+    return _this2;
+  }
+  (0, _inherits2.default)(TableProcessorWithContainerStyles, _React$Component2);
+  return (0, _createClass2.default)(TableProcessorWithContainerStyles, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      if (!children) {
+        return null;
+      }
+      var childrenArray = _react.default.Children.toArray(children);
+      var orderedChildren = (0, _utils.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.default.createElement(TableContainer, this.props, orderedChildren);
+    }
+  }]);
+}(_react.default.Component);