@getflip/swirl-components-react 0.84.1 → 0.86.0

package/dist/swirl-autocomplete.entry.b6d0d4b3.js

@@ -1,69 +0,0 @@
-import { r as n, c as r, h as o, H as u, g as c } from "./index.b2639202.js";
-import { a as h, c as d, o as p } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
-import { c as m } from "./index-d280dafb.186cdb0e.js";
-import { d as b } from "./utils-bc84f36e.1fee9865.js";
-import "react";
-import "react-dom";
-const g = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}", f = class {
-  constructor(i) {
-    n(this, i), this.valueChange = r(this, "valueChange", 7), this.onChange = b(async (t) => {
-      this.value = t.detail, this.valueChange.emit(this.value), this.updateSuggestions(), this.open();
-    }, 250, !1), this.onSelect = (t) => {
-      var s;
-      Boolean(t.detail[0]) && (this.value = t.detail[0], this.valueChange.emit(this.value)), (s = this.inputEl.querySelector("input")) == null || s.focus(), this.close();
-    }, this.onFocusOut = (t) => {
-      const s = t.relatedTarget;
-      Boolean(s) && !this.el.contains(s) && this.close();
-    }, this.onFocus = () => {
-      this.updateSuggestions(), this.open();
-    }, this.onKeyDown = (t) => {
-      t.code === "Escape" && (t.preventDefault(), this.inputEl.querySelector("input").focus(), this.close());
-    }, this.onInputKeyDown = (t) => {
-      t.code === "ArrowDown" && (t.preventDefault(), this.listboxEl.querySelector('[role="listbox"]').focus());
-    }, this.autoSelect = void 0, this.clearable = !0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.generateSuggestions = async () => [], this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.menuLabel = "Suggestions", this.mode = void 0, this.required = void 0, this.spellCheck = void 0, this.swirlAriaDescribedby = void 0, this.value = void 0, this.active = !1, this.loading = !1, this.position = void 0, this.suggestions = [];
-  }
-  componentWillLoad() {
-    const i = document.querySelectorAll("swirl-datepicker").length;
-    this.id = `autocomplete-${i}`;
-  }
-  onWindowClick(i) {
-    const t = i.target;
-    this.el.contains(t) || this.close();
-  }
-  async close() {
-    !this.active || (this.disableAutoUpdate && this.disableAutoUpdate(), this.active = !1);
-  }
-  async open() {
-    this.active || (this.active = !0, requestAnimationFrame(async () => {
-      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = h(this.inputEl, this.listboxContainerEl, this.reposition.bind(this)), this.listboxContainerEl.scrollTop = 0;
-    }));
-  }
-  async reposition() {
-    !Boolean(this.listboxContainerEl) || (this.position = await d(this.inputEl, this.listboxContainerEl, {
-      middleware: [p({ crossAxis: -16, mainAxis: 16 })],
-      placement: "bottom-start",
-      strategy: "fixed"
-    }));
-  }
-  async updateSuggestions() {
-    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(this.value), this.loading = !1;
-  }
-  render() {
-    var s, a, l;
-    const i = `${this.id}-suggestions`, t = m("autocomplete", {
-      "autocomplete--inactive": !this.active
-    });
-    return o(u, null, o("div", { class: t, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: i, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), o("div", { class: "autocomplete__listbox-container", ref: (e) => this.listboxContainerEl = e, style: {
-      top: Boolean(this.position) ? `${(s = this.position) == null ? void 0 : s.y}px` : "",
-      left: Boolean(this.position) ? `${(a = this.position) == null ? void 0 : a.x}px` : "",
-      width: `${((l = this.inputEl) == null ? void 0 : l.getBoundingClientRect().width) + 32}px`
-    } }, this.loading && o("div", { class: "autocomplete__spinner" }, o("swirl-spinner", null)), this.suggestions.length > 0 && o("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: i, ref: (e) => this.listboxEl = e, value: [this.value] }, this.suggestions.map((e) => o("swirl-option-list-item", { selected: this.value === e.label, key: e.id, disabled: e.disabled, label: e.label, value: e.label }))))));
-  }
-  get el() {
-    return c(this);
-  }
-};
-f.style = g;
-export {
-  f as swirl_autocomplete
-};

package/dist/swirl-form-control.entry.6fe6d752.js

@@ -1,77 +0,0 @@
-import { r as c, h as o, H as a, g as m } from "./index.b2639202.js";
-import { c as f } from "./index-d280dafb.186cdb0e.js";
-import { a as h } from "./utils-bc84f36e.1fee9865.js";
-import "react";
-import "react-dom";
-const d = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--label-position-outside.sc-swirl-form-control{padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{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)}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}", p = class {
-  constructor(r) {
-    c(this, r), this.descriptionId = `form-control-description-${Math.round(Math.random() * 1e5)}`, this.listenToInputValueChanges = () => {
-      this.inputEl.addEventListener("valueChange", this.checkInputValue);
-    }, this.checkInputValue = () => {
-      var t;
-      this.inputValue = (t = this.inputEl) == null ? void 0 : t.value;
-    }, this.onFocusIn = () => {
-      this.hasFocus = !0;
-    }, this.onFocusOut = () => {
-      this.hasFocus = !1;
-    }, this.onKeyDown = (t) => {
-      t.key === "Tab" && setTimeout(() => {
-        this.el.contains(h()) || (this.hasFocus = !1);
-      });
-    }, this.description = void 0, this.disabled = void 0, this.errorMessage = void 0, this.hideLabel = void 0, this.inline = void 0, this.invalid = void 0, this.label = void 0, this.labelPosition = "inside", this.hasFocus = void 0, this.inputValue = void 0;
-  }
-  componentWillLoad() {
-    this.inputEl = this.el.children[0], this.associateDescriptionWithInputElement(), this.setInputElementDisabledState(), this.setInputElementInlineState(), this.setInputElementInvalidState(), this.setInputElementLabel(), this.checkInputValue(), this.listenToInputValueChanges();
-  }
-  associateDescriptionWithInputElement() {
-    !Boolean(this.description) || !Boolean(this.inputEl) || this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId);
-  }
-  setInputElementDisabledState() {
-    !Boolean(this.inputEl) || (this.disabled ? this.inputEl.setAttribute("disabled", "true") : this.inputEl.removeAttribute("disabled"));
-  }
-  setInputElementInlineState() {
-    !Boolean(this.inputEl) || (this.inline || this.labelPosition === "outside" ? this.inputEl.setAttribute("inline", "true") : this.inputEl.removeAttribute("inline"));
-  }
-  setInputElementInvalidState() {
-    !Boolean(this.inputEl) || (this.invalid ? this.inputEl.setAttribute("invalid", "true") : this.inputEl.removeAttribute("invalid"));
-  }
-  setInputElementLabel() {
-    !Boolean(this.inputEl) || this.inputEl.setAttribute("label", this.label);
-  }
-  onWindowClick(r) {
-    if (!this.hasFocus)
-      return;
-    const t = r.target;
-    this.el.contains(t) || (r.stopPropagation(), this.hasFocus = !1);
-  }
-  render() {
-    const r = Boolean(this.errorMessage), t = Boolean(this.description) && !r, s = Array.isArray(this.inputValue) ? this.inputValue.length > 0 : Boolean(this.inputValue), l = Boolean(this.inputEl.getAttribute("show-character-counter")), e = Boolean(this.inputEl.getAttribute("placeholder")), i = this.inputEl.tagName === "SWIRL-SELECT", n = f("form-control", `form-control--label-position-${this.labelPosition}`, {
-      "form-control--disabled": this.disabled,
-      "form-control--has-character-counter": l,
-      "form-control--has-focus": this.hasFocus,
-      "form-control--has-placeholder": e,
-      "form-control--has-value": s,
-      "form-control--hide-label": this.hideLabel,
-      "form-control--inline": this.inline,
-      "form-control--invalid": this.invalid,
-      "form-control--is-select": i
-    });
-    return o(a, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("div", { class: n, role: "group" }, o("label", { class: "form-control__label" }, o("span", { class: "form-control__label-text" }, this.label), o("span", { class: "form-control__input" }, o("slot", null))), t && o("span", { class: "form-control__description", id: this.descriptionId }, this.description), r && o("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, o("swirl-inline-error", { message: this.errorMessage, size: "s" }))));
-  }
-  get el() {
-    return m(this);
-  }
-  static get watchers() {
-    return {
-      description: ["associateDescriptionWithInputElement"],
-      disabled: ["setInputElementDisabledState"],
-      inline: ["setInputElementInlineState"],
-      invalid: ["setInputElementInvalidState"],
-      label: ["setInputElementLabel"]
-    };
-  }
-};
-p.style = d;
-export {
-  p as swirl_form_control
-};

package/dist/swirl-tab-bar.entry.f885360a.js

@@ -1,33 +0,0 @@
-import { r, c as i, h as e, H as s } from "./index.b2639202.js";
-import { c as b } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const o = '.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}', n = class {
-  constructor(a) {
-    r(this, a), this.activateNextTab = i(this, "activateNextTab", 7), this.activatePreviousTab = i(this, "activatePreviousTab", 7), this.activateTab = i(this, "activateTab", 7), this.onKeyDown = (t) => {
-      t.code === "ArrowLeft" ? (t.preventDefault(), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.activateNextTab.emit());
-    }, this.disableTabSemantics = void 0, this.label = void 0, this.tabs = [];
-  }
-  render() {
-    return e(s, null, e("div", { "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist" }, this.tabs.map((a) => {
-      const t = b("tab-bar__tab", {
-        "tab-bar__tab--active": a.active
-      });
-      return e("button", {
-        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
-        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
-        class: t,
-        id: `tab-${a.id}`,
-        key: a.id,
-        onClick: () => this.activateTab.emit(a.id),
-        role: this.disableTabSemantics ? void 0 : "tab",
-        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
-        type: "button"
-      }, e("span", { class: "tab-bar__tab-label" }, a.label));
-    })));
-  }
-};
-n.style = o;
-export {
-  n as swirl_tab_bar
-};

package/dist/swirl-tag.entry.b01c5cc3.js

@@ -1,23 +0,0 @@
-import { r, c as s, h as t, H as n, g as i } from "./index.b2639202.js";
-import { c as l } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const c = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}", u = class {
-  constructor(e) {
-    r(this, e), this.remove = s(this, "remove", 7), this.onRemove = (o) => {
-      var a;
-      (a = this.remove) == null || a.emit(o);
-    }, this.intent = "default", this.label = void 0, this.removable = void 0, this.removalButtonLabel = "Remove";
-  }
-  render() {
-    const e = l("tag", `tag--intent-${this.intent}`);
-    return t(n, null, t("span", { class: e, part: "tag" }, t("span", { class: "tag__label" }, this.label), this.removable && t("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, t("swirl-icon-close", { size: 16 }))));
-  }
-  get el() {
-    return i(this);
-  }
-};
-u.style = c;
-export {
-  u as swirl_tag
-};