@nanoporetech-digital/components 4.9.2 → 4.9.3

package/dist/components/table.js

@@ -983,6 +983,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
     this.scrollHandler = () => {
+      if (!this.store.general.state.isActive)
+        return;
       this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
       requestAnimationFrame(() => {
         let cumulativeHeight = 0;
@@ -1067,7 +1069,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.currentSort = '';
       await this.columnInit();
       if (!this.isReady)
-        this.setInitialBlockDimension();
+        requestAnimationFrame(() => this.setInitialBlockDimension());
       this._loading = false;
     });
   }
@@ -1160,8 +1162,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? document
         : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
     }
-    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler, { passive: true });
     this._scrollParent = ele;
+    this.setupActiveWatcher();
   }
   // used to fire `nanoTblBlockRendered` on block render change
   get primaryBlockIndex() {
@@ -1319,56 +1322,49 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.scrollHandler();
   }
   setMeasureElement() {
-    readTask(() => {
-      this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
+    return new Promise((resolve) => {
+      readTask(() => {
+        this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
+        resolve();
+      });
     });
   }
   /**
-   * Sets the initial height on tbody elements that are not active
-   * These elements have no natural height - on account of all their rows being hidden
-   * So we just estimate for now
+   * Makes sure we have dimensions on at least one, active tbody element.
+   * We'll use this is a yard stick for inactive tbody elements in future.
+   * These elements have no natural height (on account of all their rows being hidden)
    */
   setInitialBlockDimension() {
     var _a;
     if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
       return;
     perMark('blockDims');
-    const finishResizing = new Promise((resolve) => {
-      readTask(() => {
-        this.setMeasureElement();
-        // find the first active block
-        if (!this.measureEle && !this.unitHeight) {
-          // it's likely this table is hidden in the dom.
-          // we need to wait until it's visible
-          const observer = new IntersectionObserver(([e]) => {
-            if (e.isIntersecting) {
-              resolve();
-              observer.disconnect();
-            }
-          }, { root: this.scrollParent });
-          observer.observe(this.tableEle);
-        }
-        else {
-          this.blockElements.forEach((el, i) => {
-            var _a;
-            if (!el || !((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`))) {
-              if (i === this.blockElements.length - 1)
-                resolve();
-              return;
-            }
-            if (i === this.blockElements.length - 1)
-              resolve();
-          });
-        }
-      });
+    const testForDimensions = async () => {
+      await this.setMeasureElement();
+      if (this.unitHeight)
+        return true;
+      return false;
+    };
+    const dimensionsReady = new Promise(async (resolve) => {
+      if (await testForDimensions())
+        resolve();
+      else {
+        // it's likely this table is hidden in the dom.
+        // we need to wait until it's visible
+        const observer = new IntersectionObserver(async () => {
+          if (await testForDimensions()) {
+            resolve();
+            observer.disconnect();
+          }
+        }, { root: this.scrollParent });
+        observer.observe(this.tableEle);
+      }
     });
     // we're all finished.
-    finishResizing.then(() => {
+    dimensionsReady.then(() => {
       perMark('blockDims', true);
       perMark('init', true);
-      requestAnimationFrame(() => {
-        this.isReady = true;
-      });
+      requestAnimationFrame(() => (this.isReady = true));
     });
   }
   /** Apply initial columns settings */
@@ -1472,11 +1468,29 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       console.error('For accessibility you must set a `caption` prop or use the `caption` slot');
     }
   }
+  /** Adds an IO. Makes sure our scroll listener is only active when
+   * the table is in viewport */
+  setupActiveWatcher() {
+    if (!this.host || !this.scrollParent)
+      return;
+    if (this.activeWatcherIo) {
+      this.activeWatcherIo.disconnect();
+      this.activeWatcherIo = undefined;
+    }
+    const io = (this.activeWatcherIo = new IntersectionObserver(async ([e]) => {
+      if (e.isIntersecting)
+        this.store.general.state.isActive = true;
+      else
+        this.store.general.state.isActive = false;
+    }, { root: this.scrollParent }));
+    io.observe(this.host);
+  }
   // Component lifecycle
   async componentWillLoad() {
     perMark('init');
     this.scrollParent = findScrollParent(this.host);
     this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
+    this.store.general.onChange('isActive', this.scrollHandler);
     await this.handleRowsChange();
     this.processSlots();
     this.store.data.onChange('rows', () => this.setBlocks());
@@ -1504,6 +1518,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setMeasureElement();
     perMark('render', true);
   }
+  disconnectedCallback() {
+    if (!this.activeWatcherIo)
+      return;
+    this.activeWatcherIo.disconnect();
+    this.activeWatcherIo = undefined;
+  }
   render() {
     this.blockElements = [];
     return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, h("nano-progress-bar", { indeterminate: true, class: {