@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/dist/es2019/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -6,48 +6,34 @@ export class OverflowShadowsObserver {
   // updateShadowState is a method to update shadow key
   constructor(updateShadowState, _table, wrapper) {
     _defineProperty(this, "firstCell", null);
-
     _defineProperty(this, "lastCell", null);
-
     _defineProperty(this, "getFirstCell", (isSticky, hasHeaderRow) => {
       var _this$table;
-
       return (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
     });
-
     _defineProperty(this, "getLastCell", (isSticky, hasHeaderRow) => {
       var _this$table2;
-
       return (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
     });
-
     _defineProperty(this, "isSticky", false);
-
     _defineProperty(this, "stickyRowHeight", 0);
-
     _defineProperty(this, "init", () => {
       const table = this.table;
-
       if (!this.wrapper || !table) {
         return;
       }
-
       if (!this.tableIntersectionObserver) {
         const intersectonOnbserverCallback = entry => {
           var _entry$rootBounds, _entry$rootBounds2;
-
           if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
             return;
           }
-
           if (entry.target !== this.firstCell && entry.target !== this.lastCell) {
             return;
           }
-
           this.updateStickyShadowsHeightIfChanged();
           this.checkIntersectionEvent(entry, this.firstCell === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
         };
-
         this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
           entries.forEach(entry => intersectonOnbserverCallback(entry));
         }, {
@@ -58,102 +44,84 @@ export class OverflowShadowsObserver {
         return;
       }
     });
-
     _defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
-      if ( // If it's in full view, don't show shadow.
+      if (
+      // If it's in full view, don't show shadow.
       entry.isIntersecting && entry.intersectionRatio === 1) {
         this.updateShadowState(shadowKey, false);
-      } else if ( // If it's in partial view, show a shadow
+      } else if (
+      // If it's in partial view, show a shadow
       entry.intersectionRatio < 1) {
         this.updateShadowState(shadowKey, true);
       }
     });
-
     _defineProperty(this, "observeCells", (isSticky, hasHeaderRow) => {
       const stickyChanged = !!isSticky !== this.isSticky;
-      this.isSticky = !!isSticky; // update sticky shadows
+      this.isSticky = !!isSticky;
 
+      // update sticky shadows
       this.updateStickyShadowsHeightIfChanged();
-
       if (!stickyChanged) {
         const firstCell = this.getFirstCell(isSticky, hasHeaderRow);
         const lastCell = this.getLastCell(isSticky, hasHeaderRow);
-
         if (!firstCell || !lastCell || firstCell === this.firstCell && lastCell === this.lastCell) {
           return;
         }
       }
-
       this.firstCell = this.getFirstCell(isSticky, hasHeaderRow);
       this.lastCell = this.getLastCell(isSticky, hasHeaderRow);
-
       if (this.tableIntersectionObserver && this.firstCell && this.lastCell) {
         this.tableIntersectionObserver.disconnect();
         this.tableIntersectionObserver.observe(this.firstCell);
         this.tableIntersectionObserver.observe(this.lastCell);
       }
     });
-
     _defineProperty(this, "updateStickyShadows", stickyRowHeight => {
       var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
-
       if (!this.isSticky) {
         return;
       }
-
       const stickyCell = this.getStickyCell();
-
       if (!stickyCell || !((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-
-      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`; // Use getElementsByClassName here for a live node list to capture
+      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`;
+      // Use getElementsByClassName here for a live node list to capture
       // sticky shadows
-
       const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
       const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
       updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
       updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
     });
-
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
     this.init();
   }
-
   updateStickyShadowsHeightIfChanged() {
     if (!this.isSticky) {
       return;
     }
-
     const stickyCell = this.getStickyCell();
-
     if (!stickyCell) {
       return;
     }
-
     const newStickyRowHeight = stickyCell.clientHeight + 1;
-
     if (newStickyRowHeight === this.stickyRowHeight) {
       this.stickyRowHeight = newStickyRowHeight;
       this.updateStickyShadows(this.stickyRowHeight);
     }
   }
-
   getStickyCell() {
     var _this$wrapper4;
-
     const stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
     const stickyCell = stickyRow && stickyRow.firstElementChild;
     return stickyCell;
   }
-
   dispose() {
     if (this.tableIntersectionObserver) {
       this.tableIntersectionObserver.disconnect();
       this.tableIntersectionObserver = undefined;
     }
   }
-
 }

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

@@ -21,14 +21,12 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
 import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
 const isIE11 = browser.ie_version === 11;
-
 const NOOP = () => undefined;
-
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       scroll: 0,
       tableContainerWidth: 'inherit',
@@ -37,49 +35,39 @@ class TableComponent extends React.Component {
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
       [ShadowEvent.SHOW_AFTER_SHADOW]: false
     });
-
     _defineProperty(this, "updateShadowState", (shadowKey, value) => {
       if (this.state[shadowKey] === value) {
         return;
-      } // need this check to satisfy types for the setState argument
-
-
+      }
+      // need this check to satisfy types for the setState argument
       if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
         return this.setState({
           [shadowKey]: value
         });
       }
-
       this.setState({
         [shadowKey]: value
       });
     });
-
     _defineProperty(this, "onStickyState", state => {
       const {
         tableOverflowShadowsOptimization
       } = this.props.getEditorFeatureFlags();
       const pos = this.props.getPos();
-
       if (!isValidPosition(pos, this.props.view.state)) {
         return;
       }
-
       const stickyHeader = findStickyHeaderForTable(state, pos);
-
       if (stickyHeader !== this.state.stickyHeader) {
         this.setState({
           stickyHeader
         });
-
         if (tableOverflowShadowsOptimization && this.overflowShadowsObserver) {
           this.overflowShadowsObserver.updateStickyShadows();
         }
       }
     });
-
     _defineProperty(this, "prevTableState", null);
-
     _defineProperty(this, "getMarginLeft", tableContainerCssWidth => {
       const {
         containerWidth
@@ -88,43 +76,34 @@ class TableComponent extends React.Component {
         lineLength
       } = containerWidth;
       let marginLeft;
-
       if (tableContainerCssWidth !== 'inherit' && lineLength) {
         const containerWidth = parsePx(tableContainerCssWidth);
-
         if (containerWidth) {
           marginLeft = (lineLength - containerWidth) / 2;
         }
       }
-
       return marginLeft;
     });
-
     _defineProperty(this, "handleScroll", event => {
       if (!this.wrapper || event.target !== this.wrapper) {
         return;
       }
-
       if (this.table) {
         // sync sticky header row to table scroll
         const headers = this.table.querySelectorAll('tr[data-header-row]');
-
         for (let i = 0; i < headers.length; i++) {
           const header = headers[i];
           header.scrollLeft = this.wrapper.scrollLeft;
           header.style.marginRight = '2px';
         }
       }
-
       const {
         tableOverflowShadowsOptimization
       } = this.props.getEditorFeatureFlags();
-
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
       }
     });
-
     _defineProperty(this, "handleTableResizing", () => {
       const {
         getNode,
@@ -133,20 +112,24 @@ class TableComponent extends React.Component {
       } = this.props;
       const prevNode = this.node;
       const node = getNode();
-      const prevAttrs = prevNode.attrs; // We only consider a layout change valid if it's done outside of an autoSize.
+      const prevAttrs = prevNode.attrs;
 
+      // We only consider a layout change valid if it's done outside of an autoSize.
       const layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
       const parentWidth = this.getParentNodeWidth();
       const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
       const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
       const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
       const noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
-
-      if ( // Breakout mode/layout changed
-      layoutChanged || // We need to react if our parent changes
+      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
+      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
@@ -156,16 +139,13 @@ class TableComponent extends React.Component {
             layoutChanged
           });
         }
-
         this.updateParentWidth(parentWidth);
       }
-
       this.updateTableContainerWidth();
       this.node = node;
       this.containerWidth = containerWidth;
       this.layoutSize = layoutSize;
     });
-
     _defineProperty(this, "scaleTable", scaleOptions => {
       const {
         view,
@@ -180,17 +160,16 @@ class TableComponent extends React.Component {
         dispatch
       } = view;
       const pos = getPos();
-
       if (!isValidPosition(pos, state)) {
         return;
       }
-
       const domAtPos = view.domAtPos.bind(view);
       const {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
-      scaleTable(this.table, { ...scaleOptions,
+      scaleTable(this.table, {
+        ...scaleOptions,
         node,
         prevNode: this.node || node,
         start: pos + 1,
@@ -199,7 +178,6 @@ class TableComponent extends React.Component {
         ...options
       }, domAtPos)(state, dispatch);
     });
-
     _defineProperty(this, "handleAutoSize", () => {
       if (this.table) {
         const {
@@ -210,32 +188,34 @@ class TableComponent extends React.Component {
         } = this.props;
         const node = getNode();
         const pos = getPos();
-
         if (!isValidPosition(pos, view.state)) {
           return;
         }
-
         autoSizeTable(view, node, this.table, pos, {
           containerWidth: containerWidth.width
         });
       }
     });
-
     _defineProperty(this, "handleWindowResize", () => {
+      var _node$attrs, _node$attrs2;
       const {
         getNode,
         containerWidth
       } = this.props;
-      const layoutSize = this.tableNodeLayoutSize(getNode());
-
+      const node = getNode();
+      const prevNode = this.node;
+      const layoutSize = this.tableNodeLayoutSize(node);
+      const prevAttrs = prevNode === null || prevNode === void 0 ? void 0 : prevNode.attrs;
+      const layoutChanged = (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.layout) !== (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) && (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.__autoSize) === (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.__autoSize);
       if (containerWidth.width > layoutSize) {
         return;
       }
-
       const parentWidth = this.getParentNodeWidth();
-      this.scaleTableDebounced(parentWidth);
+      this.scaleTableDebounced({
+        layoutChanged: layoutChanged,
+        parentWidth: parentWidth
+      });
     });
-
     _defineProperty(this, "updateTableContainerWidth", () => {
       const {
         getNode,
@@ -243,30 +223,24 @@ class TableComponent extends React.Component {
         options
       } = this.props;
       const node = getNode();
-
       if (options && options.isBreakoutEnabled === false) {
         return;
       }
-
       const tableContainerWidth = calcTableWidth(node.attrs.layout, containerWidth.width);
-
       if (this.state.tableContainerWidth === tableContainerWidth) {
         return null;
       }
-
       this.setState(prevState => {
         if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
           return {
             tableContainerWidth: 'inherit'
           };
         }
-
         return {
           tableContainerWidth
         };
       });
     });
-
     _defineProperty(this, "getParentNodeWidth", () => {
       const {
         getPos,
@@ -277,32 +251,23 @@ class TableComponent extends React.Component {
         }
       } = this.props;
       const pos = getPos();
-
       if (!isValidPosition(pos, state)) {
         return;
       }
-
-      return getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+      const parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+      return getParentWidthWithoutPadding(parentNodeWith, pos, state);
     });
-
     _defineProperty(this, "updateParentWidth", width => {
       this.setState({
         parentWidth: width
       });
     });
-
     _defineProperty(this, "tableNodeLayoutSize", (node, containerWidth, options) => getLayoutSize(node.attrs.layout, containerWidth || this.props.containerWidth.width, options || this.props.options || {}));
-
     _defineProperty(this, "scaleTableDebounced", rafSchedule(this.scaleTable));
-
     _defineProperty(this, "handleTableResizingDebounced", rafSchedule(this.handleTableResizing));
-
     _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
-
     _defineProperty(this, "handleAutoSizeDebounced", rafSchedule(this.handleAutoSize));
-
     _defineProperty(this, "handleWindowResizeDebounced", rafSchedule(this.handleWindowResize));
-
     const {
       options: _options,
       containerWidth: _containerWidth,
@@ -310,14 +275,16 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags
     } = props;
     this.node = _getNode();
-    this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
+    this.containerWidth = _containerWidth;
 
+    // store table size using previous full-width mode so can detect if it has changed
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled
-    }); // Disable inline table editing and resizing controls in Firefox
-    // https://github.com/ProseMirror/prosemirror/issues/432
+    });
 
+    // Disable inline table editing and resizing controls in Firefox
+    // https://github.com/ProseMirror/prosemirror/issues/432
     if ('execCommand' in document) {
       ['enableObjectResizing', 'enableInlineTableEditing'].forEach(cmd => {
         if (document.queryCommandSupported(cmd)) {
@@ -325,11 +292,9 @@ class TableComponent extends React.Component {
         }
       });
     }
-
     const {
       initialRenderOptimization
     } = getEditorFeatureFlags();
-
     if (!initialRenderOptimization) {
       // @see ED-7945
       requestAnimationFrame(() => {
@@ -339,17 +304,14 @@ class TableComponent extends React.Component {
       });
     }
   }
-
   componentDidMount() {
     const {
       allowColumnResizing,
       eventDispatcher
     } = this.props;
-
     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).
@@ -359,38 +321,29 @@ class TableComponent extends React.Component {
       this.updateTableContainerWidth();
       this.handleTableResizingDebounced();
     }
-
     const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
-
     if (currentStickyState) {
       this.onStickyState(currentStickyState);
     }
-
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
   }
-
   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);
   }
-
   componentDidUpdate(prevProps) {
     const {
       view,
@@ -402,43 +355,35 @@ class TableComponent extends React.Component {
       isInDanger
     } = getPluginState(view.state);
     const table = findTable(view.state.selection);
-
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
-
     const {
       tableOverflowShadowsOptimization
     } = this.props.getEditorFeatureFlags();
-
     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()));
       }
     }
-
     const 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
+    }
+    // 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.
       const previousTable = this.node;
-
       if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
         const {
           view
@@ -446,23 +391,18 @@ class TableComponent extends React.Component {
         recreateResizeColsByNode(this.table, currentTable);
         updateControls(this.props.getEditorFeatureFlags)(view.state);
       }
-
       this.handleTableResizingDebounced();
     }
   }
-
   updateShadows() {
     var _this$wrapper2;
-
     const parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
-
     if (this.wrapper && parent) {
       const rightShadows = parent.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
       const leftShadows = parent.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
       updateOverflowShadows(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
     }
   }
-
   render() {
     const {
       view,
@@ -481,8 +421,8 @@ class TableComponent extends React.Component {
       showBeforeShadow,
       showAfterShadow
     } = this.state;
-    const node = getNode(); // doesn't work well with WithPluginState
-
+    const node = getNode();
+    // doesn't work well with WithPluginState
     const {
       isInDanger,
       hoveredRows
@@ -495,8 +435,9 @@ class TableComponent extends React.Component {
     } = this.props.getEditorFeatureFlags();
     const tableRef = this.table || undefined;
     const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
-    const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
+    const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
 
+    //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
     const tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
     const hasHeaderRow = containsHeaderRow(node);
     const rowControls = /*#__PURE__*/React.createElement("div", {
@@ -512,7 +453,8 @@ class TableComponent extends React.Component {
       isHeaderRowEnabled: isHeaderRowEnabled,
       ordering: ordering,
       isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
+      hasHeaderRow: hasHeaderRow
+      // pass `selection` and `tableHeight` to control re-render
       ,
       selection: view.state.selection,
       tableHeight: tableHeight,
@@ -554,11 +496,9 @@ class TableComponent extends React.Component {
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
       ref: elem => {
         this.wrapper = elem;
-
         if (elem) {
           this.props.contentDOM(elem);
           const tableElement = elem.querySelector('table');
-
           if (tableElement !== this.table) {
             this.table = tableElement;
           }
@@ -583,9 +523,6 @@ class TableComponent extends React.Component {
       "data-testid": "sticky-sentinel-bottom"
     }));
   }
-
 }
-
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-
 export default TableComponent;