@getflip/swirl-components 0.95.0 → 0.95.2

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

@@ -16,35 +16,25 @@ export class SwirlActionList {
       }
     };
   }
-  componentDidLoad() {
-    this.updateItems();
-    this.observeSlotChanges();
-  }
-  disconnectedCallback() {
-    this.observer?.disconnect();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems();
-    });
-    this.observer.observe(this.el, { childList: true });
-  }
-  updateItems() {
-    this.items = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  getItems() {
+    return querySelectorAllDeep(this.el, '[role="menuitem"]');
   }
   focusNextItem() {
+    const items = this.getItems();
     const activeItemIndex = this.getActiveItemIndex();
-    const newIndex = (activeItemIndex + 1) % this.items.length;
-    this.items[newIndex].focus();
+    const newIndex = (activeItemIndex + 1) % items.length;
+    items[newIndex].focus();
   }
   focusPreviousItem() {
+    const items = this.getItems();
     const activeItemIndex = this.getActiveItemIndex();
-    const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
-    this.items[newIndex]?.focus();
+    const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+    items[newIndex]?.focus();
   }
   getActiveItemIndex() {
+    const items = this.getItems();
     const activeElement = getActiveElement();
-    return this.items.findIndex((item) => item === activeElement ||
+    return items.findIndex((item) => item === activeElement ||
       item === activeElement?.querySelector('[role="menuitem"]'));
   }
   render() {

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

@@ -32,8 +32,16 @@ export class SwirlAutocomplete {
             !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);
+        this.inputEl.value = "";
+        const input = this.inputEl.querySelector("input");
+        if (Boolean(input)) {
+          input.value = "";
+          queueMicrotask(() => {
+            input.focus();
+            this.close();
+          });
+          this.updateSuggestions(input.value);
+        }
       }
       else {
         if (Boolean(event.detail[0])) {

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

@@ -224,6 +224,7 @@
 @media (min-width: 992px) {
 
 .modal--has-secondary-content .modal__primary-content {
+      max-width: calc(100% - 24rem);
       max-height: none;
       flex-basis: calc(100% - 24rem)
   }

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

@@ -294,9 +294,11 @@ export class SwirlOptionList {
     this.focusItem(newIndex);
   }
   getActiveItemIndex() {
-    return this.items
-      .map((item) => item.querySelector('[role="option"]'))
-      .findIndex((item) => item === this.focusedItem);
+    return Boolean(this.focusedItem)
+      ? this.items
+        .map((item) => item.querySelector('[role="option"]'))
+        .findIndex((item) => item === this.focusedItem)
+      : 0;
   }
   getItemIndex(item) {
     return this.items.map((i) => i).findIndex((i) => i === item);

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

@@ -29,7 +29,7 @@ export class SwirlResourceList {
       this.draggingStartIndex = undefined;
     };
     this.onKeyDown = (event) => {
-      if (event.key === "ArrowDown") {
+      if (event.code === "ArrowDown") {
         event.preventDefault();
         if (!Boolean(this.dragging)) {
           this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
@@ -38,7 +38,7 @@ export class SwirlResourceList {
           this.moveDraggedItemDown();
         }
       }
-      else if (event.key === "ArrowUp") {
+      else if (event.code === "ArrowUp") {
         event.preventDefault();
         if (!Boolean(this.dragging)) {
           const prevIndex = this.focusedIndex === 0
@@ -50,7 +50,7 @@ export class SwirlResourceList {
           this.moveDraggedItemUp();
         }
       }
-      else if (event.key === "Space" || event.key === "Enter") {
+      else if (event.code === "Space" || event.code === "Enter") {
         const target = event.composedPath()[0];
         if (Boolean(this.dragging) &&
           !target?.classList.contains("resource-list-item__drag-handle")) {
@@ -58,11 +58,11 @@ export class SwirlResourceList {
           this.stopDrag(this.dragging);
         }
       }
-      else if (event.key === "Home") {
+      else if (event.code === "Home") {
         event.preventDefault();
         this.focusItemAtIndex(0);
       }
-      else if (event.key === "End") {
+      else if (event.code === "End") {
         event.preventDefault();
         this.focusItemAtIndex(this.items.length - 1);
       }
@@ -90,7 +90,11 @@ export class SwirlResourceList {
       this.setItemAllowDragState();
       this.setupDragDrop();
     });
-    this.observer.observe(this.el, { childList: true });
+    this.observer.observe(this.el, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
   }
   watchAllowDrag() {
     this.setItemAllowDragState();
@@ -105,9 +109,12 @@ export class SwirlResourceList {
     return this.items.map((i) => i).findIndex((i) => i === item);
   }
   removeItemsFromTabOrder() {
-    this.items.forEach((item) => item
-      ?.querySelector(".resource-list-item__content, .resource-list-file-item")
-      ?.setAttribute("tabIndex", "-1"));
+    this.items.forEach((item) => {
+      const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item");
+      const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
+      focusableEl?.setAttribute("tabIndex", "-1");
+      dragHandle?.setAttribute("tabIndex", "-1");
+    });
   }
   setItemAllowDragState() {
     if (this.allowDrag) {
@@ -148,6 +155,10 @@ export class SwirlResourceList {
       return;
     }
     const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item");
+    const dragHandle = item.querySelector(".resource-list-item__drag-handle");
+    if (Boolean(dragHandle)) {
+      dragHandle.setAttribute("tabIndex", "0");
+    }
     if (!Boolean(interactiveElement)) {
       return;
     }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.spec.js

@@ -60,23 +60,21 @@ describe("swirl-resource-list", () => {
     });
     const items = Array.from(page.root.querySelectorAll("swirl-resource-list-item"));
     const interactiveElements = items.map((item) => item.querySelector(".resource-list-item__content"));
-    // focuses the first element if list is focused
-    page.root.children[0].focus();
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("0");
-    // Down arrow focues the next element
-    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+    // Down arrow focuses the next element
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowDown" }));
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("-1");
     expect(interactiveElements[1].getAttribute("tabIndex")).toBe("0");
     // Up arrow focues the next element
-    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp" }));
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowUp" }));
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("0");
     expect(interactiveElements[1].getAttribute("tabIndex")).toBe("-1");
     // End key focues the first element
-    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "End" }));
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "End" }));
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("-1");
     expect(interactiveElements[1].getAttribute("tabIndex")).toBe("0");
     // Home key focues the first element
-    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Home" }));
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "Home" }));
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("0");
     expect(interactiveElements[1].getAttribute("tabIndex")).toBe("-1");
   });
@@ -101,10 +99,11 @@ describe("swirl-resource-list", () => {
       .dispatchEvent(new KeyboardEvent("keydown", { code: "Space" }));
     await page.waitForChanges();
     expect(assistiveText.innerHTML).toBe("Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.");
-    resourceList.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+    await page.waitForChanges();
+    resourceList.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowDown" }));
     await page.waitForChanges();
     expect(assistiveText.innerHTML).toBe("Current position: 2");
-    resourceList.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp" }));
+    resourceList.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowUp" }));
     await page.waitForChanges();
     expect(assistiveText.innerHTML).toBe("Current position: 1");
   });

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

@@ -23,9 +23,11 @@ export class SwirlSelect {
     this.onOpen = (event) => {
       this.placement = event.detail.position?.placement;
       this.open = true;
+      this.optionList.querySelector('[tabIndex="0"]')?.focus();
     };
     this.onClose = () => {
       this.open = false;
+      this.input.focus();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
@@ -78,11 +80,11 @@ export class SwirlSelect {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
       ?.map((value) => this.options.find((option) => option.value === value))
       ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
       // eslint-disable-next-line react/jsx-no-bind
-      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   static get is() { return "swirl-select"; }
   static get encapsulation() { return "scoped"; }