@getflip/swirl-components 0.43.2 → 0.44.1

package/dist/cjs/swirl-table.cjs.entry.js

@@ -82,18 +82,22 @@ const SwirlTable = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.updateLayout = dist(async () => {
-      await this.resetEmptyRowStyles();
-      await this.resetRowGroupStyles();
-      await this.resetCellStyles();
-      await this.resetColumnStyles();
-      await this.layoutEmptyRow();
-      await this.layoutRowGroups();
-      await this.layOutColumns();
+      this.resetCellStyles();
+      this.resetColumnStyles();
+      this.resetEmptyRowStyles();
+      this.resetRowGroupStyles();
+      this.layoutEmptyRow();
+      this.layoutRowGroups();
       this.layOutCells();
-    }, 17, { leading: true });
+    }, 16, { leading: true });
     this.onScroll = () => {
       this.updateScrolledState();
     };
+    this.onSlotChange = async () => {
+      await this.updateLayout();
+      this.updateScrolledState();
+      this.updateEmptyState();
+    };
     this.caption = undefined;
     this.emptyStateLabel = "No results found.";
     this.label = undefined;
@@ -102,22 +106,6 @@ const SwirlTable = class {
     this.scrolled = undefined;
     this.scrolledToEnd = undefined;
   }
-  componentDidLoad() {
-    this.observer = new MutationObserver(async () => {
-      await this.updateLayout();
-      this.updateScrolledState();
-      this.updateEmptyState();
-    });
-    this.observer.observe(this.el, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.columnObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-  }
   async componentDidRender() {
     await this.updateLayout();
     this.updateScrolledState();
@@ -127,6 +115,52 @@ const SwirlTable = class {
     await this.updateLayout();
     this.updateScrolledState();
   }
+  /**
+   * Force a re-render of the table
+   */
+  async rerender() {
+    await this.updateLayout();
+    this.updateScrolledState();
+    this.updateEmptyState();
+  }
+  resetEmptyRowStyles() {
+    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    emptyRow.style.width = "";
+  }
+  resetRowGroupStyles() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    tableRowGroups.forEach((tableRowGroup) => {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
+        return;
+      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
+    });
+  }
+  resetColumnStyles() {
+    const columns = this.getColumns();
+    columns.forEach((column) => {
+      column.classList.remove("table-column--has-shadow");
+      column.style.right = "";
+      column.style.left = "";
+      column.style.position = "";
+      column.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    const cells = this.getCells();
+    cells.forEach((cell) => {
+      cell.classList.remove("table-cell--has-shadow");
+      cell.style.flex = "";
+      cell.style.left = "";
+      cell.style.right = "";
+      cell.style.position = "";
+      cell.style.zIndex = "";
+    });
+  }
   updateScrolledState() {
     const isMobile = utils.isMobileViewport();
     const scrollable = this.container.scrollWidth > this.container.clientWidth;
@@ -164,45 +198,7 @@ const SwirlTable = class {
   getCells() {
     return Array.from(this.el.querySelectorAll("swirl-table-cell"));
   }
-  async resetEmptyRowStyles() {
-    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
-    if (!Boolean(emptyRow)) {
-      return;
-    }
-    emptyRow.style.width = "";
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetRowGroupStyles() {
-    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-    tableRowGroups.forEach((tableRowGroup) => {
-      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetColumnStyles() {
-    const columns = this.getColumns();
-    columns.forEach((column) => {
-      column.classList.remove("table-column--has-shadow");
-      column.style.right = "";
-      column.style.left = "";
-      column.style.position = "";
-      column.style.zIndex = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetCellStyles() {
-    const cells = this.getCells();
-    cells.forEach((cell) => {
-      cell.classList.remove("table-cell--has-shadow");
-      cell.style.flex = "";
-      cell.style.left = "";
-      cell.style.right = "";
-      cell.style.position = "";
-      cell.style.zIndex = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async layoutEmptyRow() {
+  layoutEmptyRow() {
     const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
     if (!Boolean(emptyRow)) {
       return;
@@ -210,97 +206,28 @@ const SwirlTable = class {
     const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
     emptyRow.style.width = scrollWidth;
   }
-  async layoutRowGroups() {
+  layoutRowGroups() {
+    var _a;
     const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    const scrollWidth = `${(_a = this.el.shadowRoot.querySelector(".table__container")) === null || _a === void 0 ? void 0 : _a.scrollWidth}px`;
     tableRowGroups.forEach((tableRowGroup) => {
-      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
-    });
-  }
-  async layOutColumns() {
-    const columns = this.getColumns();
-    const tableContainer = this.container;
-    const tableContainerWidth = tableContainer.clientWidth;
-    columns.forEach((column, index) => {
-      var _a, _b;
-      if (!column.sticky || utils.isMobileViewport()) {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
         return;
       }
-      const isInFirstHalfOfTable = index <= Math.floor(columns.length / 2);
-      const nextColumnIsSticky = (_a = columns[index + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
-      const prevColumnIsSticky = (_b = columns[index - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
-      const columnIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
-      column.style.zIndex = columnIsOnTopOfShadow ? "1" : "";
-      const columnHasShadow = (isInFirstHalfOfTable && !nextColumnIsSticky) ||
-        (!isInFirstHalfOfTable && !prevColumnIsSticky);
-      if (columnHasShadow) {
-        column.classList.add(isInFirstHalfOfTable
-          ? "table-column--has-shadow-right"
-          : "table-column--has-shadow-left");
-      }
-      else {
-        column.classList.remove("table-column--has-shadow-right");
-        column.classList.remove("table-column--has-shadow-left");
-      }
-      const offset = isInFirstHalfOfTable
-        ? column.offsetLeft
-        : Math.max(0, tableContainerWidth -
-          (column.offsetLeft + column.getBoundingClientRect().width));
-      column.style.position = "sticky";
-      if (isInFirstHalfOfTable) {
-        column.style.left = `${offset}px`;
-      }
-      else {
-        column.style.right = `${offset}px`;
-      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
     });
-    await new Promise((resolve) => setTimeout(resolve));
   }
   layOutCells() {
     const columns = this.getColumns();
     const cells = this.getCells();
     columns.forEach((column, colIndex) => {
-      var _a, _b;
       const cellsOfColumn = cells.filter((_, cellIndex) => {
         return (colIndex - cellIndex) % columns.length === 0;
       });
-      const isInFirstHalfOfTable = colIndex <= Math.floor(columns.length / 2);
-      const offset = isInFirstHalfOfTable
-        ? window.getComputedStyle(column).left
-        : window.getComputedStyle(column).right;
-      const nextColumnIsSticky = (_a = columns[colIndex + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
-      const prevColumnIsSticky = (_b = columns[colIndex - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
-      const columnIsSticky = column.sticky;
       const columnWidth = column.width || `${column.getBoundingClientRect().width}px`;
       cellsOfColumn.forEach((cell) => {
-        const cellSticksToLeft = columnIsSticky && isInFirstHalfOfTable;
-        const cellSticksToRight = columnIsSticky && !isInFirstHalfOfTable;
-        const cellIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
         cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
-        if (utils.isMobileViewport()) {
-          cell.classList.remove("table-cell--has-shadow");
-          cell.style.left = "";
-          cell.style.right = "";
-          cell.style.position = "";
-          cell.style.zIndex = "";
-          return;
-        }
-        cell.style.left = cellSticksToLeft ? offset : "";
-        cell.style.right = cellSticksToRight ? offset : "";
-        cell.style.position = columnIsSticky ? "sticky" : "";
-        cell.style.zIndex = cellIsOnTopOfShadow ? "1" : "";
-        const cellHasShadow = columnIsSticky &&
-          ((isInFirstHalfOfTable && !nextColumnIsSticky) ||
-            (!isInFirstHalfOfTable && !prevColumnIsSticky));
-        if (cellHasShadow) {
-          cell.classList.add(isInFirstHalfOfTable
-            ? "table-cell--has-shadow-right"
-            : "table-cell--has-shadow-left");
-        }
-        else {
-          cell.classList.remove("table-cell--has-shadow-right");
-          cell.classList.remove("table-cell--has-shadow-left");
-        }
       });
     });
   }
@@ -309,7 +236,7 @@ const SwirlTable = class {
     this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "table" }, index.h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", null, index.h("div", { id: "caption" }, this.caption))), index.h("div", { role: "rowgroup" }, index.h("div", { class: "table__header", role: "row" }, index.h("slot", { name: "columns" }))), index.h("div", { class: "table__body" }, index.h("slot", { name: "rows" }), this.empty && (index.h("div", { class: "table__empty-row", role: "row" }, index.h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+    return (index.h(index.Host, null, index.h("div", { class: "table" }, index.h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", null, index.h("div", { id: "caption" }, this.caption))), index.h("div", { role: "rowgroup" }, index.h("div", { class: "table__header", role: "row" }, index.h("slot", { name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { class: "table__body" }, index.h("slot", { name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { class: "table__empty-row", role: "row" }, index.h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
   }
   get el() { return index.getElement(this); }
 };