@getflip/swirl-components-react 0.42.2 → 0.43.1

package/dist/{swirl-tab.entry.26e8bf1f.js → swirl-tab.entry.0a2bfba6.js}

@@ -1,4 +1,4 @@
-import { r as a, h as s, H as i } from "./index.050f274b.js";
+import { r as a, h as s, H as i } from "./index.bac4db77.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-cell.entry.1801d440.js → swirl-table-cell.entry.5a552068.js}

@@ -1,4 +1,4 @@
-import { r as e, h as s, H as l } from "./index.050f274b.js";
+import { r as e, h as s, H as l } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const o = ":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-background-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}: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}", t = class {

package/dist/{swirl-table-column.entry.2beaf629.js → swirl-table-column.entry.e76cfabd.js}

@@ -1,10 +1,15 @@
-import { r as e, h as t, H as i, g as r } from "./index.050f274b.js";
+import { r as e, h as t, H as i, g as r } from "./index.bac4db77.js";
+import { c as o } from "./utils-61f188cc.4a43deab.js";
 import "react";
 import "react-dom";
-const a = ":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-background-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--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}", o = class {
+const a = ":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-background-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--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}", n = class {
   constructor(s) {
     e(this, s), this.sort = void 0, this.sortable = void 0, this.maxWidth = void 0, this.minWidth = "fit-content", this.sticky = void 0, this.width = void 0;
   }
+  componentDidRender() {
+    const s = o(this.el, "swirl-table");
+    s == null || s.rerender();
+  }
   render() {
     const s = {
       flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
@@ -17,7 +22,7 @@ const a = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padd
     return r(this);
   }
 };
-o.style = a;
+n.style = a;
 export {
-  o as swirl_table_column
+  n as swirl_table_column
 };

package/dist/{swirl-table-row-group.entry.0b84f9e4.js → swirl-table-row-group.entry.25502d9f.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as s, g as t } from "./index.050f274b.js";
+import { r as o, h as r, H as s, g as t } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const a = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}", l = class {

package/dist/swirl-table-row.entry.109b197c.js

@@ -0,0 +1,27 @@
+import { r as o, h as e, H as s, g as r } from "./index.bac4db77.js";
+import { c as l } from "./index-d280dafb.186cdb0e.js";
+import { c as i } from "./utils-61f188cc.4a43deab.js";
+import "react";
+import "react-dom";
+const a = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", d = class {
+  constructor(t) {
+    o(this, t), this.highlighted = void 0, this.index = void 0;
+  }
+  componentDidLoad() {
+    const t = i(this.el, "swirl-table");
+    t == null || t.rerender();
+  }
+  render() {
+    const t = l("table-row", {
+      "table-row--highlighted": this.highlighted
+    });
+    return e(s, { "aria-rowindex": this.index, class: t, role: "row" }, e("slot", null));
+  }
+  get el() {
+    return r(this);
+  }
+};
+d.style = a;
+export {
+  d as swirl_table_row
+};

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

@@ -0,0 +1,131 @@
+import { r as g, h as r, H as v, g as _ } from "./index.bac4db77.js";
+import { i as S } from "./utils-61f188cc.4a43deab.js";
+import "react";
+import "react-dom";
+var R = function(t) {
+  var l = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, o = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, i = void 0, s = void 0, n = void 0, a = [];
+  return function() {
+    var m = x(l), p = new Date().getTime(), w = !i || p - i > m;
+    i = p;
+    for (var b = arguments.length, d = Array(b), c = 0; c < b; c++)
+      d[c] = arguments[c];
+    if (w && o.leading)
+      return o.accumulate ? Promise.resolve(t.call(this, [d])).then(function(u) {
+        return u[0];
+      }) : Promise.resolve(t.call.apply(t, [this].concat(d)));
+    if (s ? clearTimeout(n) : s = C(), a.push(d), n = setTimeout(y.bind(this), m), o.accumulate) {
+      var f = a.length - 1;
+      return s.promise.then(function(u) {
+        return u[f];
+      });
+    }
+    return s.promise;
+  };
+  function y() {
+    var h = s;
+    clearTimeout(n), Promise.resolve(o.accumulate ? t.call(this, a) : t.apply(this, a[a.length - 1])).then(h.resolve, h.reject), a = [], s = null;
+  }
+};
+function x(e) {
+  return typeof e == "function" ? e() : e;
+}
+function C() {
+  var e = {};
+  return e.promise = new Promise(function(t, l) {
+    e.resolve = t, e.reject = l;
+  }), e;
+}
+const E = `:host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:0.0625rem 0 0 0 var(--s-border-default),
+    -0.0625rem 0 0 0 var(--s-border-default),
+    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
+    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0.0625rem 0 0 0 var(--s-border-default),
+    -0.0625rem 0 0 0 var(--s-border-default),
+    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
+    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{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;border-right:var(--s-border-width-default) solid var(--s-border-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default);border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.table__empty-row-cell>*{flex-grow:1}`, L = class {
+  constructor(e) {
+    g(this, e), this.updateLayout = R(async () => {
+      this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCells();
+    }, 16, { leading: !0 }), this.onScroll = () => {
+      this.updateScrolledState();
+    }, this.onSlotChange = async () => {
+      await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
+    }, this.caption = void 0, this.emptyStateLabel = "No results found.", this.label = void 0, this.empty = void 0, this.scrollable = void 0, this.scrolled = void 0, this.scrolledToEnd = void 0;
+  }
+  async componentDidRender() {
+    await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout(), this.updateScrolledState();
+  }
+  async rerender() {
+    await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
+  }
+  resetEmptyRowStyles() {
+    const e = this.el.shadowRoot.querySelector(".table__empty-row");
+    !Boolean(e) || (e.style.width = "");
+  }
+  resetRowGroupStyles() {
+    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t) => {
+      const l = t.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(l) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
+    });
+  }
+  resetColumnStyles() {
+    this.getColumns().forEach((t) => {
+      t.classList.remove("table-column--has-shadow"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    this.getCells().forEach((t) => {
+      t.classList.remove("table-cell--has-shadow"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  updateScrolledState() {
+    const e = S(), t = this.container.scrollWidth > this.container.clientWidth, l = this.container.scrollLeft > 0, o = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
+    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), l !== this.scrolled && (l && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), o !== this.scrolledToEnd && (o && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
+  }
+  getColumns() {
+    return Array.from(this.el.querySelectorAll("swirl-table-column"));
+  }
+  getCells() {
+    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
+  }
+  layoutEmptyRow() {
+    const e = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(e))
+      return;
+    const t = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    e.style.width = t;
+  }
+  layoutRowGroups() {
+    var e;
+    const t = Array.from(this.el.querySelectorAll("swirl-table-row-group")), l = `${(e = this.el.shadowRoot.querySelector(".table__container")) === null || e === void 0 ? void 0 : e.scrollWidth}px`;
+    t.forEach((o) => {
+      const i = o.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(i) || (o.shadowRoot.querySelector(".table-row-group__header-row").style.width = l);
+    });
+  }
+  layOutCells() {
+    const e = this.getColumns(), t = this.getCells();
+    e.forEach((l, o) => {
+      const i = t.filter((n, a) => (o - a) % e.length === 0), s = l.width || `${l.getBoundingClientRect().width}px`;
+      i.forEach((n) => {
+        n.style.flex = Boolean(s) ? `0 0 ${s}` : "";
+      });
+    });
+  }
+  updateEmptyState() {
+    const e = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(e) || e.children.length === 0;
+  }
+  render() {
+    return r(v, null, r("div", { class: "table" }, r("div", { class: "table__container", onScroll: this.onScroll, ref: (e) => this.container = e }, r("div", { "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && r("swirl-visually-hidden", null, r("div", { id: "caption" }, this.caption)), r("div", { role: "rowgroup" }, r("div", { class: "table__header", role: "row" }, r("slot", { name: "columns", onSlotchange: this.onSlotChange }))), r("div", { class: "table__body" }, r("slot", { name: "rows", onSlotchange: this.onSlotChange }), this.empty && r("div", { class: "table__empty-row", role: "row" }, r("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, r("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))));
+  }
+  get el() {
+    return _(this);
+  }
+};
+L.style = E;
+export {
+  L as swirl_table
+};

package/dist/{swirl-tabs.entry.fc9867f7.js → swirl-tabs.entry.c6f2d5bc.js}

@@ -1,4 +1,4 @@
-import { r as e, c as b, h as s, H as r, g as n } from "./index.050f274b.js";
+import { r as e, c as b, h as s, H as r, g as n } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const c = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}", h = class {

package/dist/{swirl-tag.entry.6da1b1a3.js → swirl-tag.entry.037aa101.js}

@@ -1,4 +1,4 @@
-import { r, c as s, h as t, H as n } from "./index.050f274b.js";
+import { r, c as s, h as t, H as n } from "./index.bac4db77.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-text-input.entry.740221bb.js → swirl-text-input.entry.21cc16c1.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as d } from "./index.050f274b.js";
+import { r as h, c as n, h as i, H as d } from "./index.bac4db77.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { a as x } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-text.entry.16b12c73.js → swirl-text.entry.a2d4ade8.js}

@@ -1,4 +1,4 @@
-import { r as J, h as y, H as T, g as V } from "./index.050f274b.js";
+import { r as J, h as y, H as T, g as V } from "./index.bac4db77.js";
 import { c as F } from "./index-d280dafb.186cdb0e.js";
 import { b as G } from "./balancetext-fa49c64f.754e913c.js";
 import "react";

package/dist/{swirl-theme-provider.entry.d85716ea.js → swirl-theme-provider.entry.e101f366.js}

@@ -1,4 +1,4 @@
-import { r as j, c as E, h as w, H } from "./index.050f274b.js";
+import { r as j, c as E, h as w, H } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 function d(e, t, o) {

package/dist/{swirl-toast-provider.entry.e3c4b577.js → swirl-toast-provider.entry.3e4245e6.js}

@@ -1,4 +1,4 @@
-import { r, h as a, H as n } from "./index.050f274b.js";
+import { r, h as a, H as n } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const h = class {

package/dist/{swirl-toast.entry.87ccd241.js → swirl-toast.entry.ea3eb59c.js}

@@ -1,4 +1,4 @@
-import { r as o, c as n, h as i, H as r } from "./index.050f274b.js";
+import { r as o, c as n, h as i, H as r } from "./index.bac4db77.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { a as c } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-tooltip.entry.aeee4d70.js → swirl-tooltip.entry.e23c89fd.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as l } from "./index.050f274b.js";
+import { r as n, h as i, H as l } from "./index.bac4db77.js";
 import { c as r, o as p, s as h, f as d } from "./floating-ui.dom.esm-b9f28f6d.15013ef7.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation-item.entry.5905545a.js → swirl-tree-navigation-item.entry.25363225.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, H as s, g as r } from "./index.050f274b.js";
+import { r as t, h as i, H as s, g as r } from "./index.bac4db77.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-video-thumbnail.entry.716c5d54.js → swirl-video-thumbnail.entry.dde0f6dd.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as e } from "./index.050f274b.js";
+import { r as t, h as n, H as e } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const a = `:host {

package/dist/{swirl-visually-hidden.entry.fc6f61cd.js → swirl-visually-hidden.entry.86bfeb76.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.050f274b.js";
+import { r as s, h as i, H as l } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {

package/dist/{wc-datepicker.entry.8ad23683.js → wc-datepicker.entry.a349b6d8.js}

@@ -1,4 +1,4 @@
-import { r as R, c as S, h as n, H, g as E } from "./index.050f274b.js";
+import { r as R, c as S, h as n, H, g as E } from "./index.bac4db77.js";
 import "react";
 import "react-dom";
 function T(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.42.2",
+  "version": "0.43.1",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.43.2",
+    "@getflip/swirl-components": "^0.44.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },