@getflip/swirl-components-react 0.298.0 → 0.300.0

package/dist/swirl-table.entry.13842c4b.js

@@ -1,178 +0,0 @@
-import { r as S, h as a, H as _, g as v } from "./index.712081f1.js";
-import { d as C, i as y } from "./utils-877a768f.c277f897.js";
-import "react";
-import "react-dom";
-var k = function(t) {
-  var s = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, l = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, o = void 0, i = void 0, r = void 0, n = [];
-  return function() {
-    var b = x(s), f = new Date().getTime(), w = !o || f - o > b;
-    o = f;
-    for (var p = arguments.length, c = Array(p), d = 0; d < p; d++)
-      c[d] = arguments[d];
-    if (w && l.leading)
-      return l.accumulate ? Promise.resolve(t.call(this, [c])).then(function(u) {
-        return u[0];
-      }) : Promise.resolve(t.call.apply(t, [this].concat(c)));
-    if (i ? clearTimeout(r) : i = R(), n.push(c), r = setTimeout(m.bind(this), b), l.accumulate) {
-      var g = n.length - 1;
-      return i.promise.then(function(u) {
-        return u[g];
-      });
-    }
-    return i.promise;
-  };
-  function m() {
-    var h = i;
-    clearTimeout(r), Promise.resolve(l.accumulate ? t.call(this, n) : t.apply(this, n[n.length - 1])).then(h.resolve, h.reject), n = [], i = null;
-  }
-};
-function x(e) {
-  return typeof e == "function" ? e() : e;
-}
-function R() {
-  var e = {};
-  return e.promise = new Promise(function(t, s) {
-    e.resolve = t, e.reject = s;
-  }), e;
-}
-const L = `: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:4px 0 16px -4px rgba(23, 23, 23, 0.04),
-    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),
-    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.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}`, E = L, O = class {
-  constructor(e) {
-    S(this, e), this.triggerRerender = C(async () => {
-      await this.updateLayout(), this.updateEmptyState();
-    }, 0, !0), this.updateLayout = k(async () => {
-      this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCellsAndColumns(), this.updateScrolledState();
-    }, 16, { leading: !0 }), this.onScroll = () => {
-      this.updateScrolledState();
-    }, this.onSlotChange = async () => {
-      await this.updateLayout(), 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 componentDidLoad() {
-    this.setupIntersectionObserver();
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this.intersectionObserver) == null || e.disconnect();
-  }
-  setupIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-      threshold: 0
-    }), this.intersectionObserver.observe(this.container);
-  }
-  async onVisibilityChange(e) {
-    e.some((s) => s.isIntersecting) && setTimeout(async () => {
-      await this.updateLayout();
-    }, 100);
-  }
-  async componentDidRender() {
-    await this.updateLayout(), this.updateEmptyState();
-  }
-  async onWindowResize() {
-    await this.updateLayout();
-  }
-  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 s = t.shadowRoot.querySelector(".table-row-group__header-row");
-      !Boolean(s) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
-    });
-  }
-  resetColumnStyles() {
-    this.getColumns().forEach((t) => {
-      t.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
-    });
-  }
-  resetCellStyles() {
-    this.getCells().forEach((t) => {
-      t.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
-    });
-  }
-  updateScrolledState() {
-    const e = y();
-    if (this.container === void 0)
-      return;
-    const t = this.container.scrollWidth > this.container.clientWidth, s = this.container.scrollLeft > 0, l = 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")), s !== this.scrolled && (s && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), l !== this.scrolledToEnd && (l && !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 s;
-    const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(s = this.el.shadowRoot.querySelector(".table__container")) == null ? void 0 : s.scrollWidth}px`;
-    e.forEach((l) => {
-      const o = l.shadowRoot.querySelector(".table-row-group__header-row");
-      !Boolean(o) || (l.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
-    });
-  }
-  layOutCellsAndColumns() {
-    const e = this.getColumns(), t = this.getCells();
-    e.forEach((s, l) => {
-      const o = this.getCellsForColumn(t, e, l), i = this.calculateColumnProperties(s, e, l);
-      o.forEach((r) => this.applyCellStyles(r, s, i)), this.applyColumnStyles(s, i);
-    });
-  }
-  getCellsForColumn(e, t, s) {
-    return e.filter((l, o) => (s - o) % t.length === 0);
-  }
-  calculateColumnProperties(e, t, s) {
-    const l = e.sticky ? this.getLeftOffsetForStickyColumn(t, s) : 0, o = `${e.getBoundingClientRect().width}px`, i = e.sticky && t.length === s + 1, r = e.sticky && !this.hasStickyColumnsToRight(t, s);
-    return {
-      leftOffsetForStickyColumn: l,
-      columnWidth: o,
-      isLastColumnSticky: i,
-      hasShadowRight: r
-    };
-  }
-  applyCellStyles(e, t, s) {
-    const { leftOffsetForStickyColumn: l, columnWidth: o, isLastColumnSticky: i, hasShadowRight: r } = s;
-    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !y() && (t.sticky && !i && (e.classList.add("table-cell--is-sticky"), e.style.left = l + "px", r && e.classList.add("table-cell--has-shadow-right")), i && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
-  }
-  applyColumnStyles(e, t) {
-    if (y())
-      return;
-    const { leftOffsetForStickyColumn: s, isLastColumnSticky: l, hasShadowRight: o } = t;
-    e.sticky && !l && (e.classList.add("table-column--is-sticky"), e.style.left = s + "px", o && e.classList.add("table-column--has-shadow-right")), l && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
-  }
-  getLeftOffsetForStickyColumn(e, t) {
-    return e.slice(0, t).reduce((s, l) => {
-      if (l.sticky)
-        return s += l.getBoundingClientRect().width, s;
-    }, 0);
-  }
-  hasStickyColumnsToRight(e, t) {
-    return e.slice(t + 1, e.length - 1).some((s) => s.sticky);
-  }
-  updateEmptyState() {
-    const e = this.el.querySelector('[slot="rows"]');
-    this.empty = !Boolean(e) || e.children.length === 0;
-  }
-  render() {
-    return a(_, { key: "1dad264e782e779ec3c641670d6745ae27f311f1" }, a("div", { key: "972ff6748270ec8c89e68803dec81bb3b696b7d5", class: "table" }, a("div", { key: "8421a34d775292faec2fdb16971aa328a3d9e40d", class: "table__container", onScroll: this.onScroll, ref: (e) => this.container = e }, a("div", { key: "2057cabb89b21c4d2634552b6c868026f90c1746", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "853d3788f7e0dd1170cfbfc84e5d810e999bf800" }, a("div", { key: "72ecf2b03aa6c46d45609254f5fa9af2fbbcb039", id: "caption" }, this.caption)), a("div", { key: "02b2b15ca2aefc20a3237d95ca34b892a9bc9b41", role: "rowgroup" }, a("div", { key: "6543839c056f6caf174f65670668c2a5c6f2606e", class: "table__header", role: "row" }, a("slot", { key: "e6581bc48062a1d704ba2b9280b35190f03e2c64", name: "columns", onSlotchange: this.onSlotChange }))), a("div", { key: "04e5564657fed6b436679cd300e56e18d8f64ce8", class: "table__body" }, a("slot", { key: "4054d9418eb60559e996bb630143fbaceca90a5a", name: "rows", onSlotchange: this.onSlotChange }), this.empty && a("div", { key: "8200eb9e5bf3d8b52ead63df6d77db21bc6adbac", class: "table__empty-row", role: "row" }, a("div", { key: "f86a99a732345affb1e8fd1224673970066da191", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("swirl-text", { key: "29199285a11c90a6839a68c84edd71f04fbf4d6e", align: "center", size: "sm" }, this.emptyStateLabel))))))));
-  }
-  get el() {
-    return v(this);
-  }
-};
-O.style = E;
-export {
-  O as swirl_table
-};

package/dist/swirl-visually-hidden.entry.edd0aeec.js

@@ -1,15 +0,0 @@
-import { r as s, h as i, H as r } from "./index.712081f1.js";
-import "react";
-import "react-dom";
-const a = ".sc-swirl-visually-hidden-h{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)}", d = a, l = class {
-  constructor(e) {
-    s(this, e);
-  }
-  render() {
-    return i(r, { key: "01921ae08854d98d6ec9a5d4b03a154d6f0bb7f7" }, i("slot", { key: "2c81abcdb2d5bae0870e8104a3ea4be404516084" }));
-  }
-};
-l.style = d;
-export {
-  l as swirl_visually_hidden
-};