@getflip/swirl-components 0.225.2 → 0.226.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-08-12T09:41:05",
+  "timestamp": "2024-08-13T07:44:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6aba64ed.js');
 
-const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky}:host(.table-cell--is-sticky-right){position:sticky;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
+const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
 const SwirlTableCellStyle0 = swirlTableCellCss;
 
 const SwirlTableCell = class {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6aba64ed.js');
 const utils = require('./utils-c82e5573.js');
 
-const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky}:host(.table-column--is-sticky-right){position:sticky;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
+const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
 const SwirlTableColumnStyle0 = swirlTableColumnCss;
 
 const SwirlTableColumn = class {

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

@@ -84,7 +84,6 @@ const SwirlTable = class {
         index.registerInstance(this, hostRef);
         this.triggerRerender = utils.debounce(async () => {
             await this.updateLayout();
-            this.updateScrolledState();
             this.updateEmptyState();
         }, 0, true);
         this.updateLayout = dist(async () => {
@@ -95,13 +94,13 @@ const SwirlTable = class {
             this.layoutEmptyRow();
             this.layoutRowGroups();
             this.layOutCellsAndColumns();
+            this.updateScrolledState();
         }, 16, { leading: true });
         this.onScroll = () => {
             this.updateScrolledState();
         };
         this.onSlotChange = async () => {
             await this.updateLayout();
-            this.updateScrolledState();
             this.updateEmptyState();
         };
         this.caption = undefined;
@@ -112,14 +111,39 @@ const SwirlTable = class {
         this.scrolled = undefined;
         this.scrolledToEnd = undefined;
     }
+    async componentDidLoad() {
+        this.setupIntersectionObserver();
+    }
+    disconnectedCallback() {
+        this.intersectionObserver?.disconnect();
+    }
+    /**
+     * Set up an Intersection Observer to monitor when the table container becomes visible.
+     * This is important because the table's layout may need updating when it becomes visible,
+     * especially if it is rendered within a modal that opens after rendering.
+     */
+    setupIntersectionObserver() {
+        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+            threshold: 0,
+        });
+        this.intersectionObserver.observe(this.container);
+    }
+    async onVisibilityChange(entries) {
+        const inViewport = entries.some((entry) => entry.isIntersecting);
+        if (inViewport) {
+            // Delay layout update to ensure the container is fully visible,
+            // especially if it was initially rendered in a modal.
+            setTimeout(async () => {
+                await this.updateLayout();
+            }, 100);
+        }
+    }
     async componentDidRender() {
         await this.updateLayout();
-        this.updateScrolledState();
         this.updateEmptyState();
     }
     async onWindowResize() {
         await this.updateLayout();
-        this.updateScrolledState();
     }
     /**
      * Force a re-render of the table
@@ -151,6 +175,7 @@ const SwirlTable = class {
             column.style.right = "";
             column.style.left = "";
             column.style.position = "";
+            column.style.zIndex = "";
         });
     }
     resetCellStyles() {
@@ -161,10 +186,14 @@ const SwirlTable = class {
             cell.style.left = "";
             cell.style.right = "";
             cell.style.position = "";
+            cell.style.zIndex = "";
         });
     }
     updateScrolledState() {
         const isMobile = utils.isMobileViewport();
+        if (this.container === undefined) {
+            return;
+        }
         const scrollable = this.container.scrollWidth > this.container.clientWidth;
         const scrolled = this.container.scrollLeft > 0;
         const scrolledToEnd = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >=
@@ -297,7 +326,7 @@ const SwirlTable = class {
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (index.h(index.Host, { key: '37ef1e64f3c6cbdfed004ad7915e704f87b554b9' }, index.h("div", { key: '28cb57486ff34527137f3e8e0a1b99ea6689c028', class: "table" }, index.h("div", { key: '8638339ad10b0717838db8d2d7da46362f27b765', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: 'e188997398d9e92398d57ddf5bf86ef4302e926f', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: '43a14efa932530a84cd92b0542d0aaf369beeb21' }, index.h("div", { key: '76c0682264341a0dad2fb106bec8a9b6a21c9d9f', id: "caption" }, this.caption))), index.h("div", { key: '54f869db5cb16e867ccee307b1f44e1015488b3f', role: "rowgroup" }, index.h("div", { key: 'e0824b2e573cf5e28723997eda31cf2a9a4c1a7f', class: "table__header", role: "row" }, index.h("slot", { key: '356e94e43d75002cc4f1b3cb3be3f1f89085a3eb', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '9a9928b1e0eaf80d26c5c6bb1da16b955d79db41', class: "table__body" }, index.h("slot", { key: '6042f722777c006ad9a384deaaef9f1046e8f4e4', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: '0d7f5bc5da8a01ef0bb7f8bb639af8bb9acbca28', class: "table__empty-row", role: "row" }, index.h("div", { key: '55da68f08e43f6868bb0c96dd1b4c37f09f5db69', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'f98990fb4ea4141c7ef300fe784fb15c6f6aa833', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (index.h(index.Host, { key: '375c7b9ed74b08a4dd4f93a40390b36ef9ba7cf6' }, index.h("div", { key: '280f0d90c5899074c8ab783df64ee9a3c8fce7af', class: "table" }, index.h("div", { key: 'ba9d29fb8b7743a1259dabe64535284cda3e3ac7', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: 'e00b9870884c3585a45329c1f44a769a7f74bebd', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: 'd3c2ab9771d93e6f8a71724637b2e10e3a04044a' }, index.h("div", { key: 'f658fd8feb639bd39d450085228344bc7b9fd043', id: "caption" }, this.caption))), index.h("div", { key: 'f300cf2d69f449cdd87b1413e3295ea0f4d1ef11', role: "rowgroup" }, index.h("div", { key: 'a21c8da3eb5482467e304609d95dbf7ae666d2d2', class: "table__header", role: "row" }, index.h("slot", { key: '8c510369deb673df8ec0ac591d5bc6b66d3fc2b2', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '1b50c67e78e176cb31f10c5469d0a1b07f60891d', class: "table__body" }, index.h("slot", { key: 'ae50a28f390ff6a2d349bb685445f29245f29751', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'd2ff20c0f27d4e0743696cbbcb524b7ff573ceba', class: "table__empty-row", role: "row" }, index.h("div", { key: 'aa51ecd760c1f7ef830be9ce2405119a1f870c89', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'c6f7156718c95fce2b8e6d51b5ba9547c6404e47', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return index.getElement(this); }
 };