@getflip/swirl-components 0.122.2 → 0.123.0

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

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import Sortable from "sortablejs";
+import { v4 as uuid } from "uuid";
 export class SwirlResourceList {
   constructor() {
     this.focusedIndex = 0;
@@ -57,6 +58,15 @@ export class SwirlResourceList {
           event.preventDefault();
           this.stopDrag(this.dragging);
         }
+        else if (Boolean(this.controllingElement)) {
+          const item = this.items[this.focusedIndex];
+          if (!Boolean(item) || !item.isConnected) {
+            return;
+          }
+          event.stopPropagation();
+          event.preventDefault();
+          item.click();
+        }
       }
       else if (event.code === "Home") {
         event.preventDefault();
@@ -71,12 +81,15 @@ export class SwirlResourceList {
     this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
     this.assistiveTextItemMoving = "Current position:";
     this.assistiveTextItemMoved = "Item moved. New position:";
+    this.controllingElement = undefined;
     this.label = undefined;
     this.assistiveText = undefined;
+    this.listId = uuid();
   }
   componentDidLoad() {
     this.observeSlotChanges();
     this.collectItems();
+    this.setupControllingElement();
     this.setItemAllowDragState();
     this.setupDragDrop();
   }
@@ -86,6 +99,7 @@ export class SwirlResourceList {
   disconnectedCallback() {
     this.sortable?.destroy();
     this.observer?.disconnect();
+    this.controllingElement?.removeEventListener("keydown", this.onKeyDown);
   }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
@@ -106,6 +120,18 @@ export class SwirlResourceList {
     this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((el) => el.isConnected);
     this.removeItemsFromTabOrder();
     this.enableItemFocus(this.items[this.focusedIndex]);
+    if (Boolean(this.controllingElement)) {
+      this.items[0]?.setAttribute("aria-selected", "true");
+    }
+  }
+  setupControllingElement() {
+    if (!Boolean(this.controllingElement)) {
+      return;
+    }
+    this.controllingElement.setAttribute("aria-controls", this.listId);
+    this.controllingElement.setAttribute("role", "combobox");
+    this.controllingElement.setAttribute("aria-autocomplete", "list");
+    this.controllingElement.addEventListener("keydown", this.onKeyDown);
   }
   getItemIndex(item) {
     return this.items.map((i) => i).findIndex((i) => i === item);
@@ -114,6 +140,9 @@ export class SwirlResourceList {
     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");
+      if (Boolean(this.controllingElement)) {
+        item.setAttribute("aria-selected", "false");
+      }
       focusableEl?.setAttribute("tabIndex", "-1");
       dragHandle?.setAttribute("tabIndex", "-1");
     });
@@ -153,7 +182,7 @@ export class SwirlResourceList {
     });
   }
   enableItemFocus(item, focus) {
-    if (!Boolean(item)) {
+    if (!Boolean(item) || Boolean(this.controllingElement)) {
       return;
     }
     const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item");
@@ -165,7 +194,7 @@ export class SwirlResourceList {
       return;
     }
     interactiveElement.setAttribute("tabIndex", "0");
-    if (focus) {
+    if (focus && !Boolean(this.controllingElement)) {
       interactiveElement.focus();
     }
   }
@@ -175,7 +204,11 @@ export class SwirlResourceList {
     if (!Boolean(item) || !item.isConnected) {
       return;
     }
-    this.enableItemFocus(item, true);
+    this.enableItemFocus(item, !Boolean(this.controllingElement));
+    if (Boolean(this.controllingElement)) {
+      item.setAttribute("aria-selected", "true");
+      item.scrollIntoView({ block: "nearest" });
+    }
     this.focusedIndex = index;
   }
   moveDraggedItemDown() {
@@ -199,7 +232,7 @@ export class SwirlResourceList {
     this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
   }
   render() {
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-stack", { "aria-label": this.label, class: "resource-list", ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", null))));
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-stack", { "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", null))));
   }
   static get is() { return "swirl-resource-list"; }
   static get encapsulation() { return "scoped"; }
@@ -286,6 +319,25 @@ export class SwirlResourceList {
         "reflect": false,
         "defaultValue": "\"Item moved. New position:\""
       },
+      "controllingElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -307,7 +359,8 @@ export class SwirlResourceList {
   }
   static get states() {
     return {
-      "assistiveText": {}
+      "assistiveText": {},
+      "listId": {}
     };
   }
   static get events() {

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

@@ -1,7 +1,7 @@
+import { MockElement } from "@stencil/core/mock-doc";
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlResourceListItem } from "../swirl-resource-list-item/swirl-resource-list-item";
 import { SwirlResourceList } from "./swirl-resource-list";
-import { MockElement } from "@stencil/core/mock-doc";
 global.MutationObserver = class {
   constructor() { }
   disconnect() { }
@@ -43,10 +43,11 @@ describe("swirl-resource-list", () => {
       components: [SwirlResourceList],
       html: template,
     });
+    const id = page.root.querySelector(".resource-list")?.id;
     expect(page.root).toEqualHtml(`
       <swirl-resource-list label="Label">
         <swirl-visually-hidden role="alert"></swirl-visually-hidden>
-        <swirl-stack aria-label="Label" class="resource-list" role="grid">
+        <swirl-stack aria-label="Label" class="resource-list" id="${id}" role="grid">
           <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
           <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
         </swirl-stack>

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

@@ -11,6 +11,7 @@ export default {
   title: "Components/SwirlResourceList",
 };
 const Template = (args) => {
+  const container = document.createElement("div");
   const element = generateStoryElement("swirl-resource-list", args);
   element.innerHTML = `
     <swirl-resource-list-item
@@ -33,9 +34,14 @@ const Template = (args) => {
       <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
   `;
-  return element;
+  const input = document.createElement("input");
+  container.appendChild(element);
+  container.appendChild(input);
+  element.controllingElement = input;
+  return container;
 };
 export const SwirlResourceList = Template.bind({});
 SwirlResourceList.args = {
   label: "A resource list",
+  focusSelectedItems: false,
 };

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -8,6 +8,17 @@
     box-sizing: border-box;
   }
 
+  :host[aria-selected="true"] .resource-list-item__content {
+      background-color: var(--swirl-resource-list-item-background-hovered);
+    }
+
+  :host[aria-selected="true"] .resource-list-item__content .resource-list-item__media,
+      :host[aria-selected="true"] .resource-list-item__content .resource-list-item__meta {
+        --swirl-avatar-background-color: var(--s-surface-raised-hovered);
+        --swirl-avatar-group-border-color: var(--s-background-hovered);
+        --swirl-badge-border-color: var(--s-background-hovered);
+      }
+
 .resource-list-item {
   position: relative;
   width: 100%;