@nylas/react 1.1.0-canary.5 → 1.1.0-canary.7

package/dist/chevron-icon_3.entry-db9f8217.js

@@ -1,117 +0,0 @@
-import { r as l, h as i, c as r, g as d } from "./index-f9ba9aa8.js";
-import "react";
-import "react-dom";
-const c = ".sc-chevron-icon-h{display:flex}", p = c, h = class {
-  constructor(e) {
-    l(this, e), this.width = "24", this.height = "24";
-  }
-  render() {
-    return i("svg", { key: "8b2f33f377a5e7cef2b384c7f94d8fbe16c91fa0", xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none" }, i("path", { key: "8470f2d9380d24168e7b0985b75d389e8ceae095", fill: "currentColor", d: "M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z" }));
-  }
-};
-h.style = p;
-const f = ".sc-search-icon-h{display:flex}", b = f, u = class {
-  constructor(e) {
-    l(this, e), this.width = "15", this.height = "15";
-  }
-  render() {
-    return i("svg", { key: "0a6d8feab2e4fda5ba90e67117de1b38b945eb71", width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, i("path", { key: "07847b8eff8738c946ea9d38590ed5ec59b2ee87", fill: "currentColor", d: "M5.5 0C8.53757 0 11 2.46243 11 5.5C11 6.83879 10.5217 8.06586 9.72656 9.01962L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.68 14.0271 13.4106 14.0464 13.2157 13.9114L13.1464 13.8536L9.01962 9.72656C8.06586 10.5217 6.83879 11 5.5 11C2.46243 11 0 8.53757 0 5.5C0 2.46243 2.46243 0 5.5 0ZM5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1Z" }));
-  }
-};
-u.style = b;
-const y = ':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}', x = y, w = class {
-  constructor(e) {
-    l(this, e), this.selectedOptionChanged = r(this, "selectedOptionChanged", 7), this.name = void 0, this.options = [], this.defaultSelectedOption = void 0, this.withSearch = !0, this.pluralizedLabel = "", this.selectedOption = this.defaultSelectedOption || null, this.isOpen = !1, this.searchValue = "", this.filteredOptions = [...this.options], this.ariaActivedescendant = "";
-  }
-  optionsChangedHandler(e, s) {
-    e !== s && (this.filteredOptions = e);
-  }
-  defaultSelectedOptionChangedHandler(e, s) {
-    e.label !== s.label && (this.selectedOption = e);
-  }
-  componentWillLoad() {
-    this.filteredOptions = this.options, !this.selectedOption && this.defaultSelectedOption && (this.selectedOption = this.defaultSelectedOption), !this.selectedOption && this.options.length > 0 && (this.selectedOption = this.options[0]);
-  }
-  toggleDropdown() {
-    this.isOpen = !this.isOpen;
-  }
-  filterOptions(e) {
-    const s = e.target.value;
-    this.searchValue = s, this.filteredOptions = this.options.filter((t) => t.label.toLowerCase().includes(s.toLowerCase()));
-  }
-  selectOption(e) {
-    this.selectedOption = e, this.toggleDropdown(), this.selectedOptionChanged.emit({
-      value: e.value,
-      name: this.name
-    });
-  }
-  handleSelectButtonKeyDown(e) {
-    var s;
-    switch (e.key) {
-      case "ArrowDown":
-      case "Enter":
-        e.preventDefault(), this.isOpen || this.toggleDropdown(), (s = this.inputRef) == null || s.focus();
-        break;
-      case "Escape":
-        this.isOpen = !1;
-        break;
-    }
-  }
-  handleListboxKeydown(e) {
-    var o, a;
-    const s = this.filteredOptions, t = s.findIndex((n) => n.value === this.ariaActivedescendant);
-    if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
-      if (e.preventDefault(), t === s.length - 1) {
-        this.ariaActivedescendant = "", (o = this.inputRef) == null || o.focus();
-        return;
-      }
-      const n = t + 1 < s.length ? t + 1 : 0;
-      this.ariaActivedescendant = s[n].value, this.focusOption(n);
-    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
-      if (e.preventDefault(), t === 0) {
-        this.ariaActivedescendant = "", (a = this.inputRef) == null || a.focus();
-        return;
-      }
-      const n = t - 1 >= 0 ? t - 1 : s.length - 1;
-      this.ariaActivedescendant = s[n].value, this.focusOption(n);
-    } else
-      e.key === "Enter" ? (e.preventDefault(), this.ariaActivedescendant && this.selectOption(s[t])) : e.key === "Escape" && (this.isOpen = !1);
-  }
-  focusOption(e) {
-    var a;
-    const s = this.filteredOptions[e];
-    if (!s)
-      return;
-    const t = s.value, o = (a = this.el.shadowRoot) == null ? void 0 : a.getElementById(t);
-    o && (o.focus(), o.scrollIntoView({ behavior: "smooth", block: "nearest" }));
-  }
-  handleComboboxKeyDown(e) {
-    e.key === "ArrowDown" || e.key == "Tab" && !e.shiftKey ? (e.preventDefault(), this.ariaActivedescendant = this.filteredOptions[0].value, this.focusOption(0)) : e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey ? (e.preventDefault(), this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value, this.focusOption(this.filteredOptions.length - 1)) : e.key === "Escape" && (this.isOpen = !1);
-  }
-  handleOutsideClick(e) {
-    !e.composedPath().includes(this.el) && this.isOpen && (this.isOpen = !1);
-  }
-  render() {
-    var e, s;
-    return i("div", { key: "d09b6dde0999bbf13820677ed6c737ffb0a336b1", class: "dropdown", part: "sd_dropdown" }, i("button", { key: "a5b040db9feccc009a4bcd6e398c0d109e598529", part: "sd_dropdown-button", class: { dropbtn: !0, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (t) => this.handleSelectButtonKeyDown(t) }, i("slot", { key: "c7490a8f671ffce9f6b95cb5314774eb6c4882ef", name: "select-icon", "aria-hidden": "true" }), i("span", { key: "85313f85921ee455a4bba9d9c2750da4a3e7237b", class: "selected-option", part: "sd_dropdown-button-selected-label" }, (e = this.selectedOption) != null && e.label ? `${((s = this.selectedOption) == null ? void 0 : s.label) + this.pluralizedLabel}` : ""), i("span", { key: "ae5157941f78c5c044f843e7b9661bfd21758d48", class: {
-      open: this.isOpen,
-      closed: !this.isOpen,
-      chevron: !0
-    }, "aria-hidden": "true" }, i("chevron-icon", { key: "74dc004905e6eeb589bfa789443c83c9b2f024a4", width: "16", height: "16" }))), this.isOpen ? i("div", { class: "dropdown-content", part: "sd_dropdown-content" }, this.withSearch && i("div", { class: { "search-box": !0, open: this.isOpen } }, i("search-icon", { width: "15", height: "15", class: "icon" }), i("input", { type: "text", role: "combobox", placeholder: "Search", value: this.searchValue, ref: (t) => this.inputRef = t, onInput: (t) => this.filterOptions(t), onKeyDown: (t) => this.handleComboboxKeyDown(t) })), i("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (t) => this.handleListboxKeydown(t) }, this.filteredOptions.map((t) => i("li", { tabindex: "0", key: t.value, id: t.value, onClick: () => this.selectOption(t), role: "option" }, t.labelHTML ? t.labelHTML : t.label)))) : null);
-  }
-  get el() {
-    return d(this);
-  }
-  static get watchers() {
-    return {
-      options: ["optionsChangedHandler"],
-      defaultSelectedOption: ["defaultSelectedOptionChangedHandler"]
-    };
-  }
-};
-w.style = x;
-export {
-  h as chevron_icon,
-  u as search_icon,
-  w as select_dropdown
-};

package/dist/close-icon.entry-9d141bb4.js

@@ -1,15 +0,0 @@
-import { r as t, h as e } from "./index-f9ba9aa8.js";
-import "react";
-import "react-dom";
-const c = ".sc-close-icon-h{display:flex}", s = c, f = class {
-  constructor(a) {
-    t(this, a), this.width = "16", this.height = "16";
-  }
-  render() {
-    return e("svg", { key: "f8170e797c98704a72bab2846208b545562b48dd", width: "21", height: "21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, e("g", { key: "bf1a70ca6e3c6467e9fe3fbec52bf3eaf4e1a6ab", "clip-path": "url(#a)" }, e("path", { key: "01b2cbdee2fc8bf4e3b9533a119a69787c1c0cbf", d: "M5.73 4.574a.75.75 0 1 0-1.061 1.06l4.419 4.42-4.42 4.42a.75.75 0 1 0 1.061 1.06l4.42-4.42 4.419 4.42a.75.75 0 0 0 1.06-1.06l-4.419-4.42 4.42-4.42a.75.75 0 1 0-1.061-1.06l-4.42 4.42-4.419-4.42Z", fill: "currentColor" })), e("defs", { key: "a6a7c9e0902b55a10d274201a1a696d0a6cd82e0" }, e("clipPath", { key: "b5a32b3e8f96d8799562f6b96955f86690595883", id: "a" }, e("path", { key: "94e544f1777b8b301dc9e55ae1ff2b6edbab9218", fill: "#fff", transform: "translate(.148 .054)", d: "M0 0h20v20H0z" }))));
-  }
-};
-f.style = s;
-export {
-  f as close_icon
-};

package/dist/close-icon.entry-da590fa2.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-22f7e49c.cjs");require("react");require("react-dom");const c=".sc-close-icon-h{display:flex}",s=c,a=class{constructor(t){e.registerInstance(this,t),this.width="16",this.height="16"}render(){return e.h("svg",{key:"f8170e797c98704a72bab2846208b545562b48dd",width:"21",height:"21",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.h("g",{key:"bf1a70ca6e3c6467e9fe3fbec52bf3eaf4e1a6ab","clip-path":"url(#a)"},e.h("path",{key:"01b2cbdee2fc8bf4e3b9533a119a69787c1c0cbf",d:"M5.73 4.574a.75.75 0 1 0-1.061 1.06l4.419 4.42-4.42 4.42a.75.75 0 1 0 1.061 1.06l4.42-4.42 4.419 4.42a.75.75 0 0 0 1.06-1.06l-4.419-4.42 4.42-4.42a.75.75 0 1 0-1.061-1.06l-4.42 4.42-4.419-4.42Z",fill:"currentColor"})),e.h("defs",{key:"a6a7c9e0902b55a10d274201a1a696d0a6cd82e0"},e.h("clipPath",{key:"b5a32b3e8f96d8799562f6b96955f86690595883",id:"a"},e.h("path",{key:"94e544f1777b8b301dc9e55ae1ff2b6edbab9218",fill:"#fff",transform:"translate(.148 .054)",d:"M0 0h20v20H0z"}))))}};a.style=s;exports.close_icon=a;