@getflip/swirl-components-react 0.222.0 → 0.223.0

package/package.json

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

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

@@ -1,15 +0,0 @@
-import { r as e, h as s, H as l } from "./index.4be20a24.js";
-import "react";
-import "react-dom";
-const t = ":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--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}", o = t, r = class {
-  constructor(a) {
-    e(this, a);
-  }
-  render() {
-    return s(l, { key: "d04c9413146c996aba8552aad8eb3384de8779dd", class: "table-cell", role: "cell" }, s("slot", { key: "9b402e8cb48c170d008e0415a7c289484c03d9d1" }));
-  }
-};
-r.style = o;
-export {
-  r as swirl_table_cell
-};

package/dist/swirl-table.entry.48f291a4.js

@@ -1,133 +0,0 @@
-import { r as g, h as r, H as _, g as v } from "./index.4be20a24.js";
-import { d as S, i as R } from "./utils-9b747dd7.4c4c7dc0.js";
-import "react";
-import "react-dom";
-var x = 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 b = C(l), f = new Date().getTime(), p = !i || f - i > b;
-    i = f;
-    for (var y = arguments.length, c = Array(y), d = 0; d < y; d++)
-      c[d] = arguments[d];
-    if (p && o.leading)
-      return o.accumulate ? Promise.resolve(t.call(this, [c])).then(function(u) {
-        return u[0];
-      }) : Promise.resolve(t.call.apply(t, [this].concat(c)));
-    if (s ? clearTimeout(n) : s = E(), a.push(c), n = setTimeout(m.bind(this), b), o.accumulate) {
-      var w = a.length - 1;
-      return s.promise.then(function(u) {
-        return u[w];
-      });
-    }
-    return s.promise;
-  };
-  function m() {
-    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 C(e) {
-  return typeof e == "function" ? e() : e;
-}
-function E() {
-  var e = {};
-  return e.promise = new Promise(function(t, l) {
-    e.resolve = t, e.reject = l;
-  }), e;
-}
-const k = `: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;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}`, L = k, q = class {
-  constructor(e) {
-    g(this, e), this.triggerRerender = S(async () => {
-      await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
-    }, 0, !0), this.updateLayout = x(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() {
-    this.triggerRerender();
-  }
-  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 = R(), 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 l;
-    const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(l = this.el.shadowRoot.querySelector(".table__container")) == null ? void 0 : l.scrollWidth}px`;
-    e.forEach((o) => {
-      const i = o.shadowRoot.querySelector(".table-row-group__header-row");
-      !Boolean(i) || (o.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
-    });
-  }
-  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(_, { key: "b1f0af240d936904b960103568f929bf31397849" }, r("div", { key: "fb0f701b67023ddc52765cff52b00bce7def4530", class: "table" }, r("div", { key: "8c41225148c9f058d314ae973a2ef91740b1cc8a", class: "table__container", onScroll: this.onScroll, ref: (e) => this.container = e }, r("div", { key: "8c67633613bd3a36bbc17dd9f49c7c1d5b9182b3", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && r("swirl-visually-hidden", { key: "912e38cda9e1c447f614f9df13bb2c4dc6980ece" }, r("div", { key: "67685bbcecd9f1fa67cd48a39ef3718f459dbbd1", id: "caption" }, this.caption)), r("div", { key: "c80f770dcf7e35c36365be7210e85657a682ef64", role: "rowgroup" }, r("div", { key: "a14a6e9de7cdb0c7f60b886f9f733b8e27b0153f", class: "table__header", role: "row" }, r("slot", { key: "8c3ac3bb558109ee791338599c0ac96d80f441b7", name: "columns", onSlotchange: this.onSlotChange }))), r("div", { key: "b221e7f4e314dcf425a1058ea8f001756f27a1b7", class: "table__body" }, r("slot", { key: "116ffc8eaceade3c1a4d935ffc6ea0226279975e", name: "rows", onSlotchange: this.onSlotChange }), this.empty && r("div", { key: "a1d8d4f25895637b3b888549014f7aa939a9750f", class: "table__empty-row", role: "row" }, r("div", { key: "3d870da3885ee4ef26075304f6700cb689469155", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, r("swirl-text", { key: "04c093fbd33e17d2402872dc02e0321385987e31", align: "center", size: "sm" }, this.emptyStateLabel))))))));
-  }
-  get el() {
-    return v(this);
-  }
-};
-q.style = L;
-export {
-  q as swirl_table
-};