@getflip/swirl-components 0.123.0 → 0.124.1

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

@@ -15,6 +15,44 @@ export class SwirlActionList {
         this.focusPreviousItem();
       }
     };
+    this.onFocusOut = (event) => {
+      if (this.isInsidePopover) {
+        return;
+      }
+      const elementReceivingFocus = event.relatedTarget;
+      const elementLosingFocus = event.target;
+      const losingElementIsListItem = elementLosingFocus?.tagName === "SWIRL-ACTION-LIST-ITEM";
+      const receivingElementIsOutsideActionList = elementReceivingFocus === null ||
+        !this.el.contains(elementReceivingFocus);
+      if (!this.isInsidePopover &&
+        receivingElementIsOutsideActionList &&
+        losingElementIsListItem) {
+        this.container.setAttribute("tabindex", "0");
+      }
+    };
+    this.onFocus = () => {
+      if (this.isInsidePopover) {
+        return;
+      }
+      this.container.removeAttribute("tabindex");
+      const items = this.getItems();
+      const activeItemIndex = this.getActiveItemIndex();
+      if (activeItemIndex > -1) {
+        items[activeItemIndex]?.focus();
+      }
+      else {
+        items[0]?.focus();
+      }
+    };
+    this.isInsidePopover = undefined;
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.isInsidePopover = this.el.closest("swirl-popover") !== null;
+      if (!this.isInsidePopover) {
+        this.container.setAttribute("tabindex", "0");
+      }
+    });
   }
   getItems() {
     return querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -38,7 +76,7 @@ export class SwirlActionList {
       item === activeElement?.querySelector('[role="menuitem"]'));
   }
   render() {
-    return (h(Host, null, h("div", { "aria-orientation": "vertical", class: "action-list", onKeyDown: this.onKeyDown, role: "menu" }, h("slot", null))));
+    return (h(Host, null, h("div", { "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.container = el), role: "menu" }, h("slot", null))));
   }
   static get is() { return "swirl-action-list"; }
   static get encapsulation() { return "shadow"; }
@@ -52,5 +90,10 @@ export class SwirlActionList {
       "$": ["swirl-action-list.css"]
     };
   }
+  static get states() {
+    return {
+      "isInsidePopover": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -20,7 +20,7 @@ describe("swirl-action-list", () => {
     expect(page.root).toEqualHtml(`
       <swirl-action-list>
         <mock:shadow-root>
-          <div aria-orientation="vertical" class="action-list" role="menu">
+          <div aria-orientation="vertical" class="action-list" role="menu" tabindex="0">
             <slot></slot>
           </div>
         </mock:shadow-root>

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

@@ -11,7 +11,6 @@ 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
@@ -34,14 +33,9 @@ const Template = (args) => {
       <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
   `;
-  const input = document.createElement("input");
-  container.appendChild(element);
-  container.appendChild(input);
-  element.controllingElement = input;
-  return container;
+  return element;
 };
 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

@@ -240,6 +240,7 @@
 
 .resource-list-item__media {
   display: inline-flex;
+  flex-shrink: 0;
 }
 
 .resource-list-item__label-container {