@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,595 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-import React from 'react';
-import classnames from 'classnames';
-import { isTableSelected } from '@atlaskit/editor-tables/utils';
-import rafSchedule from 'raf-schd';
-import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser } from '@atlaskit/editor-common/utils';
-import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
-import { isValidPosition } from '../../../utils';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { parsePx } from '../../../utils/dom';
-import { autoSizeTable } from '../commands';
-import { getPluginState } from '../pm-plugins/plugin-factory';
-import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
-import { scaleTable } from '../pm-plugins/table-resizing';
-import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode } from '../pm-plugins/table-resizing/utils';
-import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
-import { updateOverflowShadows } from './update-overflow-shadows';
-import memoizeOne from 'memoize-one';
-import { OverflowShadowsObserver } from './OverflowShadowsObserver';
-var isIE11 = browser.ie_version === 11;
-
-var NOOP = function NOOP() {
-  return undefined;
-};
-
-var TableComponent = /*#__PURE__*/function (_React$Component) {
-  _inherits(TableComponent, _React$Component);
-
-  var _super = _createSuper(TableComponent);
-
-  function TableComponent(props) {
-    var _defineProperty2;
-
-    var _this;
-
-    _classCallCheck(this, TableComponent);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "state", (_defineProperty2 = {
-      scroll: 0,
-      tableContainerWidth: 'inherit',
-      parentWidth: undefined,
-      isLoading: true
-    }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
-
-    _defineProperty(_assertThisInitialized(_this), "updateShadowState", function (shadowKey, value) {
-      if (_this.state[shadowKey] === value) {
-        return;
-      } // need this check to satisfy types for the setState argument
-
-
-      if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
-        return _this.setState(_defineProperty({}, shadowKey, value));
-      }
-
-      _this.setState(_defineProperty({}, shadowKey, value));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onStickyState", function (state) {
-      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
-          tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
-
-      var pos = _this.props.getPos();
-
-      if (!isValidPosition(pos, _this.props.view.state)) {
-        return;
-      }
-
-      var stickyHeader = findStickyHeaderForTable(state, pos);
-
-      if (stickyHeader !== _this.state.stickyHeader) {
-        _this.setState({
-          stickyHeader: stickyHeader
-        });
-
-        if (tableOverflowShadowsOptimization && _this.overflowShadowsObserver) {
-          _this.overflowShadowsObserver.updateStickyShadows();
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "prevTableState", null);
-
-    _defineProperty(_assertThisInitialized(_this), "getMarginLeft", function (tableContainerCssWidth) {
-      var containerWidth = _this.props.containerWidth;
-      var lineLength = containerWidth.lineLength;
-      var marginLeft;
-
-      if (tableContainerCssWidth !== 'inherit' && lineLength) {
-        var _containerWidth2 = parsePx(tableContainerCssWidth);
-
-        if (_containerWidth2) {
-          marginLeft = (lineLength - _containerWidth2) / 2;
-        }
-      }
-
-      return marginLeft;
-    });
-
-    _defineProperty(_assertThisInitialized(_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();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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 = 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;
-    });
-
-    _defineProperty(_assertThisInitialized(_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 (!isValidPosition(pos, state)) {
-        return;
-      }
-
-      var domAtPos = view.domAtPos.bind(view);
-      var width = containerWidth.width;
-
-      _this.scaleTableDebounced.cancel();
-
-      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);
-    });
-
-    _defineProperty(_assertThisInitialized(_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 (!isValidPosition(pos, view.state)) {
-          return;
-        }
-
-        autoSizeTable(view, node, _this.table, pos, {
-          containerWidth: containerWidth.width
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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);
-    });
-
-    _defineProperty(_assertThisInitialized(_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 = 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
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_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 (!isValidPosition(pos, state)) {
-        return;
-      }
-
-      return getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
-      _this.setState({
-        parentWidth: width
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
-      return getLayoutSize(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "scaleTableDebounced", rafSchedule(_this.scaleTable));
-
-    _defineProperty(_assertThisInitialized(_this), "handleTableResizingDebounced", rafSchedule(_this.handleTableResizing));
-
-    _defineProperty(_assertThisInitialized(_this), "handleScrollDebounced", rafSchedule(_this.handleScroll));
-
-    _defineProperty(_assertThisInitialized(_this), "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
-
-    _defineProperty(_assertThisInitialized(_this), "handleWindowResizeDebounced", rafSchedule(_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;
-  }
-
-  _createClass(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 = stickyHeadersPluginKey.getState(this.props.view.state);
-
-      if (currentStickyState) {
-        this.onStickyState(currentStickyState);
-      }
-
-      eventDispatcher.on(stickyHeadersPluginKey.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(stickyHeadersPluginKey.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(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, 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 (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
-          var view = this.props.view;
-          recreateResizeColsByNode(this.table, currentTable);
-          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(ClassName.TABLE_RIGHT_SHADOW));
-        var leftShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
-        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 = 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 = containsHeaderRow(node);
-      var rowControls = /*#__PURE__*/React.createElement("div", {
-        className: ClassName.ROW_CONTROLS_WRAPPER
-      }, /*#__PURE__*/React.createElement(TableFloatingControls, {
-        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 ? -tableToolbarSize : tableMarginSides;
-      var shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(function (visible) {
-        return {
-          visibility: visible ? 'visible' : 'hidden'
-        };
-      }) : NOOP;
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: tableContainerWidth,
-          marginLeft: this.getMarginLeft(tableContainerWidth)
-        },
-        className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _defineProperty(_classnames, 'less-padding', containerWidth.width < akEditorMobileBreakoutPoint), _classnames)),
-        "data-number-column": node.attrs.isNumberColumnEnabled,
-        "data-layout": node.attrs.layout
-      }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_TOP
-      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
-        style: shadowStyle(showBeforeShadow),
-        className: ClassName.TABLE_LEFT_SHADOW
-      }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(ClassName.TABLE_LEFT_SHADOW, " ").concat(ClassName.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.createElement("div", {
-        className: classnames(ClassName.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.createElement("div", {
-        style: shadowStyle(showAfterShadow),
-        className: ClassName.TABLE_RIGHT_SHADOW
-      }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-        style: {
-          position: 'absolute',
-          right: '-2px'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.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.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
-      }));
-    }
-  }]);
-
-  return TableComponent;
-}(React.Component);
-
-_defineProperty(TableComponent, "displayName", 'TableComponent');
-
-export default TableComponent;