@nanoporetech-digital/components 5.1.1 → 5.1.3

package/dist/components/table.js

@@ -863,8 +863,10 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.scrollHandler = () => {
       // don't listen if this table isn't in the viewport
-      if (!this.store.general.state.isActive)
+      if (!this.store.general.state.isActive || !this.rows)
         return;
+      if (this.primaryBlockIndex === undefined)
+        this.primaryBlockIndex = 0;
       readTask(() => {
         this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
         let cumulativeHeight = this.host.offsetTop;
@@ -881,7 +883,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             ];
             if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
               this.activeBlocks = potentialBlocks;
-              this.setBlockHeight();
             }
             this.primaryBlockIndex = blockIndex;
           }
@@ -902,6 +903,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         classes = [...e.target.className.split(' '), ...classes];
       this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
+    this.jsxRenderer = undefined;
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
@@ -1282,7 +1284,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       : dRows.length;
     let rows = [];
     const blocks = [];
-    this.blockHeights = [];
     // old skool loop for perf
     for (i; i <= l; i++) {
       rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
@@ -1311,14 +1312,14 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getBlockHeight(blockIndex) {
     if (this.blockHeights.length) {
       const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
-      if (cachedBlockHeight)
+      if (cachedBlockHeight && cachedBlockHeight.height)
         return cachedBlockHeight.height;
     }
     const blockLength = this.blocks[blockIndex].rows.length;
     if (blockLength === this.perBlock && this.measureHeight) {
       return this.measureHeight;
     }
-    return this.unitHeight ? this.unitHeight * blockLength : undefined;
+    return this.unitHeight ? this.unitHeight * blockLength : 100;
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
@@ -1327,6 +1328,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (!el)
         return;
       readTask(() => {
+        if (el.classList.contains(`${CSSNAMESPACE}__inactive`))
+          return;
         const height = el.getBoundingClientRect().height;
         // cache height to our block heights array
         // for subsequent renders
@@ -1369,7 +1372,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // setup stores
     this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
     await this.handleRowsChange();
-    this.store.general.onChange('isActive', this.scrollHandler);
+    this.store.general.onChange('isActive', () => {
+      this.scrollHandler();
+    });
     this.store.data.onChange('rows', () => this.setBlocks());
     // setup dom and attach listeners
     this.processSlots();
@@ -1397,7 +1402,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     perMark('render');
   }
   componentDidRender() {
-    this.setMeasureElement();
+    this.setMeasureElement().then(() => this.setBlockHeight());
     perMark('render', true);
   }
   disconnectedCallback() {
@@ -1405,6 +1410,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     this.activeWatcherIo.disconnect();
     this.activeWatcherIo = undefined;
+    (this.scrollParent === document.documentElement
+      ? document
+      : this.scrollParent).removeEventListener('scroll', this.scrollHandler);
   }
   render() {
     this.blockElements = [];
@@ -1446,6 +1454,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return tableCss; }
 }, [4, "nano-table", {
+    "jsxRenderer": [16],
     "type": [1],
     "caption": [1],
     "showCaption": [4, "show-caption"],