@getflip/swirl-components 0.86.0 → 0.87.0

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.css

@@ -18,6 +18,7 @@
   padding-bottom: var(--s-space-8);
   border-radius: var(--s-border-radius-sm);
   background-color: var(--s-surface-overlay-default);
+  animation: autocomplete-enter 0.1s;
   box-shadow: var(--s-shadow-level-1);
 }
 
@@ -31,3 +32,17 @@
   justify-content: center;
   align-items: center;
 }
+
+.autocomplete__multi-select-tags {
+  margin-bottom: var(--s-space-4);
+  margin-top: var(--swirl-autocomplete-tags-margin-top);
+}
+
+@keyframes autocomplete-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.js

@@ -4,19 +4,57 @@ import classnames from "classnames";
 import { debounce } from "../../utils";
 export class SwirlAutocomplete {
   constructor() {
-    this.onChange = debounce(async (event) => {
-      this.value = event.detail;
-      this.valueChange.emit(this.value);
-      this.updateSuggestions();
+    this.onChange = (event) => {
+      event.stopPropagation();
+      this.updateTerm(event);
+    };
+    this.updateTerm = debounce(async (event) => {
+      this.updateSuggestions(event.detail);
       this.open();
+      if (this.multiSelect) {
+        return;
+      }
+      if (!Boolean(event.detail) || event.detail === "") {
+        this.value = undefined;
+        this.valueChange.emit(this.value);
+      }
     }, 250, false);
-    this.onSelect = (event) => {
-      if (Boolean(event.detail[0])) {
-        this.value = event.detail[0];
+    this.onSelect = async (event) => {
+      event.stopPropagation();
+      if (this.multiSelect) {
+        const selectedItemIds = event.detail;
+        const unselectedItemIds = this.suggestions
+          .filter((suggestion) => !selectedItemIds.includes(suggestion.id))
+          .map((suggestion) => suggestion.id);
+        this.value = [
+          ...this.value.filter((item) => !unselectedItemIds.includes(item.id)),
+          ...this.suggestions.filter((suggestion) => selectedItemIds.includes(suggestion.id) &&
+            !this.value.some((item) => item.id === suggestion.id)),
+        ];
         this.valueChange.emit(this.value);
+        this.inputEl.querySelector("input")?.focus();
+        await this.updateSuggestions(this.inputEl.querySelector("input").value);
+      }
+      else {
+        if (Boolean(event.detail[0])) {
+          const itemId = event.detail[0];
+          const suggestion = this.suggestions.find((suggestion) => suggestion.id === itemId);
+          if (!Boolean(suggestion)) {
+            return;
+          }
+          this.value = suggestion;
+          this.valueChange.emit(this.value);
+          this.inputEl.querySelector("input")?.focus();
+          this.close();
+        }
       }
-      this.inputEl.querySelector("input")?.focus();
-      this.close();
+    };
+    this.onRemoveValue = (value) => {
+      if (!Array.isArray(this.value)) {
+        return;
+      }
+      this.value = this.value.filter((item) => item.id !== value);
+      this.valueChange.emit(this.value);
     };
     this.onFocusOut = (event) => {
       const relatedTarget = event.relatedTarget;
@@ -31,6 +69,7 @@ export class SwirlAutocomplete {
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         event.preventDefault();
+        event.stopPropagation();
         this.inputEl.querySelector("input").focus();
         this.close();
       }
@@ -51,6 +90,8 @@ export class SwirlAutocomplete {
     this.maxLength = undefined;
     this.menuLabel = "Suggestions";
     this.mode = undefined;
+    this.multiSelect = undefined;
+    this.placeholder = undefined;
     this.required = undefined;
     this.spellCheck = undefined;
     this.swirlAriaDescribedby = undefined;
@@ -63,6 +104,7 @@ export class SwirlAutocomplete {
   componentWillLoad() {
     const index = document.querySelectorAll("swirl-datepicker").length;
     this.id = `autocomplete-${index}`;
+    this.handleInitialValue();
   }
   onWindowClick(event) {
     const target = event.target;
@@ -70,6 +112,9 @@ export class SwirlAutocomplete {
       this.close();
     }
   }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
   async close() {
     if (!this.active) {
       return;
@@ -77,6 +122,16 @@ export class SwirlAutocomplete {
     if (this.disableAutoUpdate) {
       this.disableAutoUpdate();
     }
+    const inputEl = this.inputEl.querySelector("input");
+    if (Boolean(inputEl)) {
+      if (this.multiSelect) {
+        inputEl.value = "";
+      }
+      else {
+        inputEl.value =
+          this.value?.label || "";
+      }
+    }
     this.active = false;
   }
   async open() {
@@ -89,8 +144,9 @@ export class SwirlAutocomplete {
       if (this.disableAutoUpdate) {
         this.disableAutoUpdate();
       }
-      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this));
+      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
       this.listboxContainerEl.scrollTop = 0;
+      this.updateSuggestions(this.inputEl.querySelector("input").value);
     });
   }
   async reposition() {
@@ -103,22 +159,47 @@ export class SwirlAutocomplete {
       strategy: "fixed",
     });
   }
-  async updateSuggestions() {
+  async updateSuggestions(term) {
     this.loading = true;
     this.suggestions = [];
-    this.suggestions = await this.generateSuggestions(this.value);
+    this.suggestions = await this.generateSuggestions(term);
     this.loading = false;
   }
+  handleInitialValue() {
+    if (this.multiSelect && !Array.isArray(this.value)) {
+      this.value = [];
+    }
+    if (!this.multiSelect && Array.isArray(this.value)) {
+      this.value = undefined;
+    }
+  }
   render() {
     const suggestionsMenuId = `${this.id}-suggestions`;
+    const clearable = this.clearable && !this.multiSelect;
+    const optionListValue = this.multiSelect
+      ? this.value.map((item) => item.id)
+      : Boolean(this.value)
+        ? [this.value.id]
+        : [];
+    const valueLabel = this.multiSelect
+      ? undefined
+      : this.value?.label || "";
     const className = classnames("autocomplete", {
       "autocomplete--inactive": !this.active,
     });
-    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, 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: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, this.multiSelect &&
+      Array.isArray(this.value) &&
+      this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+      return (h("swirl-tag", { key: item.id, label: item.label,
+        // eslint-disable-next-line react/jsx-no-bind
+        onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
         top: Boolean(this.position) ? `${this.position?.y}px` : "",
         left: Boolean(this.position) ? `${this.position?.x}px` : "",
         width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: [this.value] }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: this.value === suggestion.label, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.label })))))))));
+      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+        ? this.value.some((item) => item.id === suggestion.id)
+        : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
   }
   static get is() { return "swirl-autocomplete"; }
   static get encapsulation() { return "scoped"; }
@@ -208,8 +289,8 @@ export class SwirlAutocomplete {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "(\n    currentValue: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
-          "resolved": "(currentValue: string) => Promise<SwirlAutocompleteSuggestion[]>",
+          "original": "(\n    term: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
+          "resolved": "(term: string) => Promise<SwirlAutocompleteSuggestion[]>",
           "references": {
             "Promise": {
               "location": "global"
@@ -319,6 +400,40 @@ export class SwirlAutocomplete {
         "attribute": "mode",
         "reflect": false
       },
+      "multiSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multi-select",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
       "required": {
         "type": "boolean",
         "mutable": false,
@@ -371,21 +486,24 @@ export class SwirlAutocomplete {
         "reflect": false
       },
       "value": {
-        "type": "string",
+        "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SwirlAutocompleteValue",
+          "resolved": "SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; }",
+          "references": {
+            "SwirlAutocompleteValue": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-autocomplete/swirl-autocomplete.tsx"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
           "text": ""
-        },
-        "attribute": "value",
-        "reflect": true
+        }
       }
     };
   }
@@ -409,13 +527,24 @@ export class SwirlAutocomplete {
           "text": ""
         },
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SwirlAutocompleteValue",
+          "resolved": "SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; }",
+          "references": {
+            "SwirlAutocompleteValue": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-autocomplete/swirl-autocomplete.tsx"
+            }
+          }
         }
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "multiSelect",
+        "methodName": "watchMultiSelect"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.spec.js

@@ -38,12 +38,12 @@ describe("swirl-autocomplete", () => {
     expect(page.root).toEqualHtml(`
       <swirl-autocomplete>
         <div class="autocomplete">
-          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0"></swirl-text-input>
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value=""></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #1" value="Item #1"></swirl-option-list-item>
-              <swirl-option-list-item disabled="" label="Item #2" value="Item #2"></swirl-option-list-item>
-              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #1" value="1"></swirl-option-list-item>
+              <swirl-option-list-item disabled="" label="Item #2" value="2"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -61,12 +61,12 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     expect(page.root).toEqualHtml(`
-      <swirl-autocomplete value="#3">
+      <swirl-autocomplete>
         <div class="autocomplete">
-          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value="#3"></swirl-text-input>
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value=""></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -84,15 +84,15 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     const listbox = page.root.querySelector("swirl-option-list");
-    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["3"] }));
     await page.waitForChanges();
     expect(page.root).toEqualHtml(`
-      <swirl-autocomplete value="Item #3">
+      <swirl-autocomplete>
         <div class="autocomplete autocomplete--inactive">
           <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="false" swirlrole="combobox" id="autocomplete-0" value="Item #3"></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #3" selected="" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" selected="" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -112,9 +112,7 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     const listbox = page.root.querySelector("swirl-option-list");
-    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
-    expect(spy.mock.calls[0][0].detail).toBe("#3");
-    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
-    expect(spy.mock.calls[1][0].detail).toBe("Item #3");
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["3"] }));
+    expect(spy.mock.calls[0][0].detail).toEqual({ id: "3", label: "Item #3" });
   });
 });

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.stories.js

@@ -3,6 +3,13 @@ import Docs from "./swirl-autocomplete.mdx";
 export default {
   component: "swirl-autocomplete",
   tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: {
+        type: "object",
+      },
+    },
+  },
   parameters: {
     docs: {
       page: Docs,
@@ -16,16 +23,16 @@ export default {
 
   const suggestions = [
     {
-      id: "1",
+      id: "item-1",
       label: "Item #1",
     },
     {
       disabled: true,
-      id: "2",
+      id: "item-2",
       label: "Item #2",
     },
     {
-      id: "3",
+      id: "item-3",
       label: "Item #3",
     },
   ];
@@ -49,20 +56,21 @@ export default {
 const Template = (args) => {
   const formControl = document.createElement("swirl-form-control");
   const element = generateStoryElement("swirl-autocomplete", args);
+  formControl.setAttribute("disabled", args.disabled ? "true" : "false");
   formControl.label = "Autocomplete";
   const suggestions = [
     {
-      id: "1",
+      id: "item-1",
       label: "Item #1",
     },
     {
       disabled: true,
-      id: "2",
+      id: "item-2",
       label: "Item #2",
     },
     {
-      id: "3",
-      label: "Item #3",
+      id: "item-3",
+      label: "Item #3 with a longer label",
     },
   ];
   element.generateSuggestions = async (value) => {

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -8,6 +8,8 @@
   }
 
 .form-control {
+  --swirl-autocomplete-tags-margin-top: var(--s-space-4);
+
   display: block;
   width: 100%;
   line-height: var(--s-line-height-sm);
@@ -59,7 +61,17 @@
     }
       }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control {
+    --swirl-text-input-placeholder-size: var(--s-font-size-sm)
+}
+  }
+
 .form-control--label-position-outside {
+  --swirl-text-input-placeholder-size: var(--s-font-size-base);
+  --swirl-autocomplete-tags-margin-top: 0;
+
   padding-top: calc(var(--s-line-height-sm) + var(--s-space-4));
 }
 
@@ -106,6 +118,13 @@
     max-width: calc(100% - 6rem);
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control--label-position-outside {
+    --swirl-text-input-placeholder-size: var(--s-font-size-sm)
+}
+  }
+
 .form-control--invalid.form-control--has-focus:not(.form-control--disabled) .form-control__label {
       border-color: var(--s-border-critical);
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -147,6 +147,11 @@ export class SwirlOptionList {
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
       this.updateItems();
+      this.setItemAllowDragState();
+      this.setItemDisabledState();
+      this.setItemContext();
+      this.syncItemsWithValue();
+      this.setupDragDrop();
     });
     this.observer.observe(this.listboxEl, { childList: true });
   }

package/dist/collection/components/swirl-select/swirl-select.css

@@ -23,9 +23,10 @@
 
 .select--multi .select__input {
     position: absolute;
-    visibility: hidden;
     width: 100%;
     height: 100%;
+    pointer-events: none;
+    opacity: 0;
   }
 
 .select--multi .select__multi-select-values {

package/dist/collection/components/swirl-select/swirl-select.js

@@ -30,7 +30,7 @@ export class SwirlSelect {
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
         event.preventDefault();
-        this.popover.open();
+        this.popover.open(this.el);
       }
     };
     this.allowDeselect = true;

package/dist/collection/components/swirl-text-input/swirl-text-input.css

@@ -127,6 +127,14 @@
     -moz-appearance: textfield;
   }
 
+.text-input__input::-moz-placeholder {
+    font-size: var(--swirl-text-input-placeholder-size);
+  }
+
+.text-input__input::placeholder {
+    font-size: var(--swirl-text-input-placeholder-size);
+  }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .text-input__input {

package/dist/collection/components/swirl-text-input/swirl-text-input.stories.js

@@ -14,6 +14,7 @@ const Template = (args) => {
   const formControl = document.createElement("swirl-form-control");
   const element = generateStoryElement("swirl-text-input", args);
   formControl.setAttribute("label", "Input");
+  formControl.setAttribute("disabled", args.disabled ? "true" : "false");
   formControl.append("\n  ", element, "\n");
   return formControl;
 };