@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -0,0 +1,610 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils2 = require("@atlaskit/editor-common/utils");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+
+var _commands = require("../commands");
+
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+
+var _stickyHeaders = require("../pm-plugins/sticky-headers");
+
+var _tableResizing = require("../pm-plugins/table-resizing");
+
+var _utils3 = require("../pm-plugins/table-resizing/utils");
+
+var _dom = require("../pm-plugins/table-resizing/utils/dom");
+
+var _types = require("../types");
+
+var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
+
+var _utils4 = require("../utils");
+
+var _updateOverflowShadows = require("./update-overflow-shadows");
+
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
+var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var isIE11 = _utils2.browser.ie_version === 11;
+
+var NOOP = function NOOP() {
+  return undefined;
+};
+
+var TableComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(TableComponent, _React$Component);
+
+  var _super = _createSuper(TableComponent);
+
+  function TableComponent(props) {
+    var _defineProperty2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TableComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
+      scroll: 0,
+      tableContainerWidth: 'inherit',
+      parentWidth: undefined,
+      isLoading: true
+    }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
+      if (_this.state[shadowKey] === value) {
+        return;
+      } // need this check to satisfy types for the setState argument
+
+
+      if (shadowKey === _types.ShadowEvent.SHOW_BEFORE_SHADOW) {
+        return _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
+      }
+
+      _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
+      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
+
+      var pos = _this.props.getPos();
+
+      if (!(0, _utils2.isValidPosition)(pos, _this.props.view.state)) {
+        return;
+      }
+
+      var stickyHeader = (0, _stickyHeaders.findStickyHeaderForTable)(state, pos);
+
+      if (stickyHeader !== _this.state.stickyHeader) {
+        _this.setState({
+          stickyHeader: stickyHeader
+        });
+
+        if (tableOverflowShadowsOptimization && _this.overflowShadowsObserver) {
+          _this.overflowShadowsObserver.updateStickyShadows();
+        }
+      }
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "prevTableState", null);
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getMarginLeft", function (tableContainerCssWidth) {
+      var containerWidth = _this.props.containerWidth;
+      var lineLength = containerWidth.lineLength;
+      var marginLeft;
+
+      if (tableContainerCssWidth !== 'inherit' && lineLength) {
+        var _containerWidth2 = (0, _utils2.parsePx)(tableContainerCssWidth);
+
+        if (_containerWidth2) {
+          marginLeft = (lineLength - _containerWidth2) / 2;
+        }
+      }
+
+      return marginLeft;
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (event) {
+      if (!_this.wrapper || event.target !== _this.wrapper) {
+        return;
+      }
+
+      if (_this.table) {
+        // sync sticky header row to table scroll
+        var headers = _this.table.querySelectorAll('tr[data-header-row]');
+
+        for (var i = 0; i < headers.length; i++) {
+          var header = headers[i];
+          header.scrollLeft = _this.wrapper.scrollLeft;
+          header.style.marginRight = '2px';
+        }
+      }
+
+      var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
+
+      if (!tableOverflowShadowsOptimization) {
+        _this.updateShadows();
+      }
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
+      var _this$props = _this.props,
+          getNode = _this$props.getNode,
+          containerWidth = _this$props.containerWidth,
+          options = _this$props.options;
+      var prevNode = _this.node;
+      var node = getNode();
+      var prevAttrs = prevNode.attrs; // We only consider a layout change valid if it's done outside of an autoSize.
+
+      var layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
+
+      var parentWidth = _this.getParentNodeWidth();
+
+      var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
+
+      var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
+
+      var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
+      var noOfColumnsChanged = (0, _utils4.tablesHaveDifferentNoOfColumns)(node, prevNode);
+
+      if ( // Breakout mode/layout changed
+      layoutChanged || // We need to react if our parent changes
+      // Scales the cols widths relative to the new parent width.
+      parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
+      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
+      // Usually happens on window resize.
+      layoutSize !== _this.layoutSize || noOfColumnsChanged) {
+        // If column has been inserted/deleted avoid multi dispatch
+        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+          _this.scaleTable({
+            parentWidth: parentWidth,
+            layoutChanged: layoutChanged
+          });
+        }
+
+        _this.updateParentWidth(parentWidth);
+      }
+
+      _this.updateTableContainerWidth();
+
+      _this.node = node;
+      _this.containerWidth = containerWidth;
+      _this.layoutSize = layoutSize;
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTable", function (scaleOptions) {
+      var _this$props2 = _this.props,
+          view = _this$props2.view,
+          getNode = _this$props2.getNode,
+          getPos = _this$props2.getPos,
+          containerWidth = _this$props2.containerWidth,
+          options = _this$props2.options;
+      var node = getNode();
+      var state = view.state,
+          dispatch = view.dispatch;
+      var pos = getPos();
+
+      if (!(0, _utils2.isValidPosition)(pos, state)) {
+        return;
+      }
+
+      var domAtPos = view.domAtPos.bind(view);
+      var width = containerWidth.width;
+
+      _this.scaleTableDebounced.cancel();
+
+      (0, _tableResizing.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
+        node: node,
+        prevNode: _this.node || node,
+        start: pos + 1,
+        containerWidth: width,
+        previousContainerWidth: _this.containerWidth.width || width
+      }, options), domAtPos)(state, dispatch);
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSize", function () {
+      if (_this.table) {
+        var _this$props3 = _this.props,
+            view = _this$props3.view,
+            getNode = _this$props3.getNode,
+            getPos = _this$props3.getPos,
+            containerWidth = _this$props3.containerWidth;
+
+        var _node = getNode();
+
+        var pos = getPos();
+
+        if (!(0, _utils2.isValidPosition)(pos, view.state)) {
+          return;
+        }
+
+        (0, _commands.autoSizeTable)(view, _node, _this.table, pos, {
+          containerWidth: containerWidth.width
+        });
+      }
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResize", function () {
+      var _this$props4 = _this.props,
+          getNode = _this$props4.getNode,
+          containerWidth = _this$props4.containerWidth;
+
+      var layoutSize = _this.tableNodeLayoutSize(getNode());
+
+      if (containerWidth.width > layoutSize) {
+        return;
+      }
+
+      var parentWidth = _this.getParentNodeWidth();
+
+      _this.scaleTableDebounced(parentWidth);
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateTableContainerWidth", function () {
+      var _this$props5 = _this.props,
+          getNode = _this$props5.getNode,
+          containerWidth = _this$props5.containerWidth,
+          options = _this$props5.options;
+      var node = getNode();
+
+      if (options && options.isBreakoutEnabled === false) {
+        return;
+      }
+
+      var tableContainerWidth = (0, _styles.calcTableWidth)(node.attrs.layout, containerWidth.width);
+
+      if (_this.state.tableContainerWidth === tableContainerWidth) {
+        return null;
+      }
+
+      _this.setState(function (prevState) {
+        if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
+          return {
+            tableContainerWidth: 'inherit'
+          };
+        }
+
+        return {
+          tableContainerWidth: tableContainerWidth
+        };
+      });
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeWidth", function () {
+      var _this$props6 = _this.props,
+          getPos = _this$props6.getPos,
+          containerWidth = _this$props6.containerWidth,
+          options = _this$props6.options,
+          state = _this$props6.view.state;
+      var pos = getPos();
+
+      if (!(0, _utils2.isValidPosition)(pos, state)) {
+        return;
+      }
+
+      return (0, _nodeWidth.getParentNodeWidth)(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateParentWidth", function (width) {
+      _this.setState({
+        parentWidth: width
+      });
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
+      return (0, _utils3.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
+    });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
+    var _options = props.options,
+        _containerWidth = props.containerWidth,
+        _getNode = props.getNode,
+        getEditorFeatureFlags = props.getEditorFeatureFlags;
+    _this.node = _getNode();
+    _this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
+
+    var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
+    _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
+      isFullWidthModeEnabled: isFullWidthModeEnabled
+    }); // Disable inline table editing and resizing controls in Firefox
+    // https://github.com/ProseMirror/prosemirror/issues/432
+
+    if ('execCommand' in document) {
+      ['enableObjectResizing', 'enableInlineTableEditing'].forEach(function (cmd) {
+        if (document.queryCommandSupported(cmd)) {
+          document.execCommand(cmd, false, 'false');
+        }
+      });
+    }
+
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
+
+    if (!initialRenderOptimization) {
+      // @see ED-7945
+      requestAnimationFrame(function () {
+        _this.setState({
+          isLoading: false
+        });
+      });
+    }
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TableComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props7 = this.props,
+          allowColumnResizing = _this$props7.allowColumnResizing,
+          eventDispatcher = _this$props7.eventDispatcher;
+
+      if (allowColumnResizing && this.wrapper && !isIE11) {
+        this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
+      }
+
+      if (allowColumnResizing) {
+        /**
+         * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
+         * Instead we use the resize event to only trigger updates when necessary.
+         */
+        window.addEventListener('resize', this.handleWindowResizeDebounced);
+        this.updateTableContainerWidth();
+        this.handleTableResizingDebounced();
+      }
+
+      var currentStickyState = _stickyHeaders.pluginKey.getState(this.props.view.state);
+
+      if (currentStickyState) {
+        this.onStickyState(currentStickyState);
+      }
+
+      eventDispatcher.on(_stickyHeaders.pluginKey.key, this.onStickyState);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.wrapper && !isIE11) {
+        this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
+      }
+
+      this.handleScrollDebounced.cancel();
+      this.scaleTableDebounced.cancel();
+      this.handleTableResizingDebounced.cancel();
+      this.handleAutoSizeDebounced.cancel();
+      this.handleWindowResizeDebounced.cancel();
+
+      if (this.props.allowColumnResizing) {
+        window.removeEventListener('resize', this.handleWindowResizeDebounced);
+      }
+
+      if (this.overflowShadowsObserver) {
+        this.overflowShadowsObserver.dispose();
+      }
+
+      this.props.eventDispatcher.off(_stickyHeaders.pluginKey.key, this.onStickyState);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props8 = this.props,
+          getNode = _this$props8.getNode,
+          isMediaFullscreen = _this$props8.isMediaFullscreen,
+          allowColumnResizing = _this$props8.allowColumnResizing;
+
+      var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
+
+      if (!tableOverflowShadowsOptimization) {
+        this.updateShadows();
+      } else {
+        var _this$wrapper;
+
+        if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
+          this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+        }
+
+        if (this.overflowShadowsObserver) {
+          var _this$state$stickyHea;
+
+          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils4.containsHeaderRow)(getNode()));
+        }
+      }
+
+      var currentTable = getNode();
+
+      if (currentTable.attrs.__autoSize) {
+        // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
+        this.handleAutoSizeDebounced();
+      } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
+      // see https://product-fabric.atlassian.net/browse/MEX-1290
+      else if (allowColumnResizing && this.table && !isMediaFullscreen) {
+        // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
+        // re-draw colgroup.
+        var previousTable = this.node;
+
+        if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
+          var view = this.props.view;
+          (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          (0, _dom.updateControls)(this.props.getEditorFeatureFlags)(view.state);
+        }
+
+        this.handleTableResizingDebounced();
+      }
+    }
+  }, {
+    key: "updateShadows",
+    value: function updateShadows() {
+      var _this$wrapper2;
+
+      var parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
+
+      if (this.wrapper && parent) {
+        var rightShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
+        var leftShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
+        (0, _updateOverflowShadows.updateOverflowShadows)(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames,
+          _this2 = this;
+
+      var _this$props9 = this.props,
+          view = _this$props9.view,
+          getNode = _this$props9.getNode,
+          tableResizingPluginState = _this$props9.tableResizingPluginState,
+          _this$props9$allowCon = _this$props9.allowControls,
+          allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
+          isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
+          ordering = _this$props9.ordering,
+          isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
+          tableActive = _this$props9.tableActive,
+          containerWidth = _this$props9.containerWidth;
+      var _this$state = this.state,
+          isLoading = _this$state.isLoading,
+          tableContainerWidth = _this$state.tableContainerWidth,
+          showBeforeShadow = _this$state.showBeforeShadow,
+          showAfterShadow = _this$state.showAfterShadow;
+      var node = getNode(); // doesn't work well with WithPluginState
+
+      var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
+          isInDanger = _getPluginState.isInDanger,
+          hoveredRows = _getPluginState.hoveredRows;
+
+      var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
+          stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
+          initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
+          tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
+          tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
+
+      var tableRef = this.table || undefined;
+      var isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
+      var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
+
+      var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
+      var hasHeaderRow = (0, _utils4.containsHeaderRow)(node);
+
+      var rowControls = /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
+      }, /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
+        editorView: view,
+        tableRef: tableRef,
+        tableActive: tableActive,
+        hoveredRows: hoveredRows,
+        isInDanger: isInDanger,
+        isResizing: isResizing,
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+        isHeaderRowEnabled: isHeaderRowEnabled,
+        ordering: ordering,
+        isHeaderColumnEnabled: isHeaderColumnEnabled,
+        hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
+        ,
+        selection: view.state.selection,
+        tableHeight: tableHeight,
+        headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
+        stickyHeader: this.state.stickyHeader,
+        getEditorFeatureFlags: this.props.getEditorFeatureFlags
+      }));
+
+      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
+      var shadowStyle = tableOverflowShadowsOptimization ? (0, _memoizeOne.default)(function (visible) {
+        return {
+          visibility: visible ? 'visible' : 'hidden'
+        };
+      }) : NOOP;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: tableContainerWidth,
+          marginLeft: this.getMarginLeft(tableContainerWidth)
+        },
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils.isTableSelected)(view.state.selection)), (0, _defineProperty3.default)(_classnames, 'less-padding', containerWidth.width < _editorSharedStyles.akEditorMobileBreakoutPoint), _classnames)),
+        "data-number-column": node.attrs.isNumberColumnEnabled,
+        "data-layout": node.attrs.layout
+      }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP
+      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
+        style: shadowStyle(showBeforeShadow),
+        className: _types.TableCssClassName.TABLE_LEFT_SHADOW
+      }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
+        style: {
+          visibility: tableOverflowShadowsOptimization ? showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
+        ref: function ref(elem) {
+          _this2.wrapper = elem;
+
+          if (elem) {
+            _this2.props.contentDOM(elem);
+
+            var tableElement = elem.querySelector('table');
+
+            if (tableElement !== _this2.table) {
+              _this2.table = tableElement;
+            }
+          }
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        style: shadowStyle(showAfterShadow),
+        className: _types.TableCssClassName.TABLE_RIGHT_SHADOW
+      }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          position: 'absolute',
+          right: '-2px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
+        style: {
+          visibility: tableOverflowShadowsOptimization ? showAfterShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
+        }
+      })), stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM
+      }));
+    }
+  }]);
+  return TableComponent;
+}(_react.default.Component);
+
+(0, _defineProperty3.default)(TableComponent, "displayName", 'TableComponent');
+var _default = TableComponent;
+exports.default = _default;