@getflip/swirl-components 0.78.1 → 0.80.0

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

@@ -1,10 +1,13 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlPopover } from "./swirl-popover";
+import { SwirlPopoverTrigger } from "../swirl-popover-trigger/swirl-popover-trigger";
 describe("swirl-popover", () => {
   const template = `
     <div>
-      <button id="trigger">Trigger popover</button>
-      <swirl-popover label="Popover" popover-id="popover" trigger="trigger">
+      <swirl-popover-trigger popover="popover">
+        <button id="trigger">Trigger popover</button>
+      </swirl-popover-trigger>
+      <swirl-popover label="Popover" id="popover">
         <div>Content</div>
       </swirl-popover>
     </div>
@@ -19,13 +22,15 @@ describe("swirl-popover", () => {
   });
   it("renders the trigger and content", async () => {
     const page = await newSpecPage({
-      components: [SwirlPopover],
+      components: [SwirlPopover, SwirlPopoverTrigger],
       html: template,
     });
     expect(page.body).toEqualHtml(`
       <div>
-        <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" id="trigger">Trigger popover</button>
-        <swirl-popover id="popover" label="Popover" popover-id="popover" trigger="trigger">
+        <swirl-popover-trigger popover="popover">
+          <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" id="trigger">Trigger popover</button>
+        </swirl-popover-trigger>
+        <swirl-popover id="popover" label="Popover">
           <mock:shadow-root>
             <div class="popover popover--animation-scale-in-xy popover--inactive  popover--placement-undefined">
               <div aria-hidden="true" aria-label="Popover" class="popover__content" part="popover__content" role="dialog" tabindex="-1">
@@ -45,18 +50,20 @@ describe("swirl-popover", () => {
   });
   it("opens on click and closes on blur/esc", async () => {
     const page = await newSpecPage({
-      components: [SwirlPopover],
+      components: [SwirlPopover, SwirlPopoverTrigger],
       html: template,
     });
     function isOpen() {
-      return !page.root.shadowRoot
-        .querySelector(".popover")
+      return !page.doc
+        .querySelector("swirl-popover")
+        .shadowRoot.querySelector(".popover")
         .classList.contains("popover--inactive");
     }
     expect(isOpen()).toBeFalsy();
     // click trigger
-    const trigger = page.body.querySelector("#trigger");
+    const trigger = page.root;
     trigger.click();
+    await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
     expect(isOpen()).toBeTruthy();
     // blur popover
@@ -66,11 +73,13 @@ describe("swirl-popover", () => {
     expect(isOpen()).toBeFalsy();
     // re-open popover
     trigger.click();
+    await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
     expect(isOpen()).toBeTruthy();
     // close via escape key
-    page.root.shadowRoot
-      .querySelector(".popover")
+    page.doc
+      .querySelector("swirl-popover")
+      .shadowRoot.querySelector(".popover")
       .dispatchEvent(new KeyboardEvent("keydown", { code: "Escape" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();

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

@@ -13,7 +13,7 @@ export default {
       },
     },
     trigger: {
-      description: "ID of the trigger element or the trigger DOM element.",
+      description: "**Deprecated! Please use the swirl-popover-trigger component instead.** ID of the trigger element or the trigger DOM element.",
       control: {
         type: "text",
       },
@@ -31,34 +31,18 @@ export default {
   parameters: {
     docs: {
       page: Docs,
-      source: {
-        code: `<swirl-button id="trigger" label="Trigger"></swirl-button>
-
-<swirl-popover label="Popover" popover-id="popover" trigger="trigger">
-  <swirl-action-list>
-    <swirl-action-list-section label="Section 1">
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 1"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 2"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 3"></swirl-action-list-item>
-    </swirl-action-list-section>
-    <swirl-action-list-section label="Section 2">
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 1"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 2"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 3"></swirl-action-list-item>
-    </swirl-action-list-section>
-  </swirl-action-list>
-</swirl-popover>`,
-      },
     },
   },
   title: "Components/SwirlPopover",
 };
 const Template = (args) => {
   const container = document.createElement("div");
-  const trigger = document.createElement("swirl-button");
+  const trigger = document.createElement("swirl-popover-trigger");
   const element = generateStoryElement("swirl-popover", args);
-  trigger.id = "trigger";
-  trigger.label = "Trigger popover";
+  trigger.setAttribute("popover", "popover");
+  trigger.innerHTML = `
+    <swirl-button label="Trigger popover"></swirl-button>
+  `;
   element.innerHTML = `
     <swirl-action-list>
       <swirl-action-list-section label="Section 1">
@@ -73,7 +57,7 @@ const Template = (args) => {
       </swirl-action-list-section>
     </swirl-action-list>
   `;
-  container.append(trigger, element);
+  container.append("\n  ", trigger, "\n  ", element);
   element.addEventListener("click", (event) => {
     const target = event.target;
     if ((target === null || target === void 0 ? void 0 : target.tagName) === "SWIRL-ACTION-LIST-ITEM") {
@@ -84,7 +68,6 @@ const Template = (args) => {
 };
 export const SwirlPopover = Template.bind({});
 SwirlPopover.args = {
+  id: "popover",
   label: "Popover",
-  popoverId: "popover",
-  trigger: "trigger",
 };

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -0,0 +1,132 @@
+import { h, Host } from "@stencil/core";
+export class SwirlPopoverTrigger {
+  constructor() {
+    this.popoverOpen = false;
+    this.onClick = (event) => {
+      event.stopPropagation();
+      const popoverEl = this.getPopoverEl();
+      if (!Boolean(popoverEl)) {
+        return;
+      }
+      if (this.popoverOpen) {
+        popoverEl.close();
+        return;
+      }
+      const triggerEl = this.getTriggerEl();
+      if (!Boolean(triggerEl)) {
+        return;
+      }
+      popoverEl.open(triggerEl);
+      popoverEl.addEventListener("popoverOpen", () => {
+        this.popoverOpen = true;
+        this.updateTriggerElAriaAttributes(true);
+      }, { once: true });
+      popoverEl.addEventListener("popoverClose", () => {
+        this.popoverOpen = false;
+        this.updateTriggerElAriaAttributes(false);
+      }, { once: true });
+    };
+    this.updateTriggerElAriaAttributes = (open) => {
+      var _a;
+      if (!this.setAriaAttributes) {
+        return;
+      }
+      const triggerEl = this.getTriggerEl();
+      const popoverId = typeof this.popover === "string" ? this.popover : (_a = this.popover) === null || _a === void 0 ? void 0 : _a.id;
+      if (triggerEl.tagName.startsWith("SWIRL-")) {
+        triggerEl.setAttribute("swirl-aria-controls", popoverId);
+        triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
+        triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
+      }
+      else {
+        triggerEl.setAttribute("aria-controls", popoverId);
+        triggerEl.setAttribute("aria-expanded", String(open || "false"));
+        triggerEl.setAttribute("aria-haspopup", "dialog");
+      }
+    };
+    this.popover = undefined;
+    this.setAriaAttributes = true;
+  }
+  componentDidLoad() {
+    this.updateTriggerElAriaAttributes();
+  }
+  watchPopover() {
+    this.updateTriggerElAriaAttributes();
+  }
+  getPopoverEl() {
+    return typeof this.popover === "string"
+      ? document.querySelector(`#${this.popover}`)
+      : this.popover;
+  }
+  getTriggerEl() {
+    if (this.el.children.length !== 1) {
+      console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.');
+    }
+    return this.el.children[0];
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick }, h("slot", null)));
+  }
+  static get is() { return "swirl-popover-trigger"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-popover-trigger.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-popover-trigger.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "popover": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLSwirlPopoverElement",
+          "resolved": "HTMLSwirlPopoverElement | string",
+          "references": {
+            "HTMLSwirlPopoverElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover",
+        "reflect": false
+      },
+      "setAriaAttributes": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "set-aria-attributes",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "popover",
+        "methodName": "watchPopover"
+      }];
+  }
+}

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.spec.js

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlPopoverTrigger } from "./swirl-popover-trigger";
+import { SwirlButton } from "../swirl-button/swirl-button";
+describe("swirl-popover-trigger", () => {
+  it("renders its trigger element and adds aria attributes", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPopoverTrigger, SwirlButton],
+      html: `
+        <swirl-popover-trigger popover="popover">
+          <swirl-button label="trigger"></swirl-button>
+        </swirl-popover-trigger>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-popover-trigger popover="popover">
+        <swirl-button label="trigger" swirl-aria-controls="popover" swirl-aria-expanded="false" swirl-aria-haspopup="dialog">
+          <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" class="button button--icon-position-start button--intent-default button--size-m button--variant-ghost" type="button">
+            <span class="button__label">
+              trigger
+            </span>
+          </button>
+        </swirl-button>
+      </swirl-popover-trigger>
+    `);
+  });
+});

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.stories.js

@@ -0,0 +1,48 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-popover-trigger.mdx";
+export default {
+  argTypes: {
+    popover: {
+      description: "ID of a popover element or a reference to a DOM element of type HTMLSwirlPopoverElement.",
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: "swirl-popover-trigger",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlPopoverTrigger",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-stack");
+  const element = generateStoryElement("swirl-popover-trigger", args);
+  const secondTrigger = generateStoryElement("swirl-popover-trigger", args);
+  const popover = document.createElement("swirl-popover");
+  container.orientation = "horizontal";
+  container.spacing = "16";
+  popover.label = "Popover";
+  popover.id = "popover";
+  popover.placement = "bottom-start";
+  popover.innerHTML = `
+    <swirl-box padding="12">
+      <swirl-text size="sm">Popover</swirl-text>
+    </swirl-box>
+  `;
+  element.innerHTML = `
+    <swirl-button label="Trigger element" variant="flat"></swirl-button>
+  `;
+  secondTrigger.innerHTML = `
+    <swirl-button label="Second trigger, same popover" variant="flat"></swirl-button>
+  `;
+  container.append("\n  ", element, "\n  ", secondTrigger, "\n  ", popover, "\n");
+  return container;
+};
+export const SwirlPopoverTrigger = Template.bind({});
+SwirlPopoverTrigger.args = {
+  popover: "popover",
+};

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

@@ -223,6 +223,13 @@
   transform: translateY(-50%);
 }
 
+.resource-list-item__control {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  transform: translateY(-50%);
+}
+
 .resource-list-item__checkbox {
   position: absolute;
   top: 50%;

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

@@ -2,6 +2,7 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
 /**
+ * @slot control - Used to add a menu button to the item
  * @slot media - Media displayed inside the item (e.g. swirl-avatar)
  */
 export class SwirlResourceListItem {
@@ -56,6 +57,9 @@ export class SwirlResourceListItem {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    if (Boolean(this.menuTriggerId)) {
+      console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
+    }
   }
   disconnectedCallback() {
     var _a, _b;
@@ -83,9 +87,9 @@ export class SwirlResourceListItem {
         ? "a"
         : "button";
     const disabled = this.disabled && !Boolean(this.href);
-    const hasMenu = Boolean(this.menuTriggerId);
+    const hasMenu = Boolean(this.menuTriggerId) || this.el.querySelector("[slot='control']");
     const href = this.interactive && Boolean(this.href) ? this.href : undefined;
-    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
     const showMeta = Boolean(this.meta) && !this.selectable;
     const ariaChecked = this.selectable ? String(this.checked) : undefined;
     const role = this.interactive && this.selectable ? "checkbox" : undefined;
@@ -99,7 +103,7 @@ export class SwirlResourceListItem {
       "resource-list-item--interactive": this.interactive || this.selectable,
       "resource-list-item--selectable": this.selectable,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick }))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }

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

@@ -29,6 +29,7 @@ describe("swirl-resource-list-item", () => {
               </span>
             </span>
           </button>
+          <span class="resource-list-item__control"></span>
         </div>
       </swirl-resource-list-item>
     `);

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

@@ -1,49 +1,48 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-resource-list-item.mdx";
 export default {
+  argTypes: {
+    menuTriggerId: {
+      description: "**Deprecated!** Please use the `control` slot to render an item control.",
+    },
+    menuTriggerLabel: {
+      description: "**Deprecated!** Please use the `control` slot to render an item control.",
+    },
+  },
   component: "swirl-resource-list-item",
   tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,
-      source: {
-        code: `<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>"
-  menu-trigger-id="trigger"
->
-</swirl-resource-list-item>
-
-<swirl-popover label="Popover" popover-id="popover" trigger="trigger">
-  <swirl-action-list>
-    <swirl-action-list-item
-      icon="<swirl-icon-mention></swirl-icon-mention>"
-      label="Action item 1"
-    ></swirl-action-list-item>
-    <swirl-action-list-item
-      icon="<swirl-icon-mention></swirl-icon-mention>"
-      label="Action item 2"
-    ></swirl-action-list-item>
-  </swirl-action-list>
-</swirl-popover>`,
-      },
     },
   },
   title: "Components/SwirlResourceListItem",
 };
 const Template = (args) => {
   const container = document.createElement("div");
+  const list = document.createElement("div");
   const popover = document.createElement("swirl-popover");
+  const control = document.createElement("span");
   const element = generateStoryElement("swirl-resource-list-item", args);
   element.innerHTML = `
-    <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" slot="media"></swirl-avatar>
+      <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" slot="media"></swirl-avatar>
   `;
-  container.setAttribute("aria-label", "List");
-  container.setAttribute("role", "grid");
+  control.slot = "control";
+  control.innerHTML = `
+        <swirl-popover-trigger popover="popover">
+          <swirl-button
+            hide-label
+            icon="<swirl-icon-more-horizontal></swirl-icon-more-horizontal>"
+            intent="primary"
+            label="Show menu"></swirl-button>
+        </swirl-popover-trigger>
+      `;
+  list.setAttribute("aria-label", "List");
+  list.setAttribute("role", "grid");
+  popover.id = "popover";
+  popover.animation = "scale-in-y";
   popover.label = "Options";
-  popover.popoverId = "popover";
-  popover.trigger = "trigger";
+  popover.placement = "bottom-end";
   popover.innerHTML = `
     <swirl-action-list>
       <swirl-action-list-item
@@ -56,12 +55,13 @@ const Template = (args) => {
       ></swirl-action-list-item>
     </swirl-action-list>
   `;
-  container.append(element, popover);
+  element.append("    ", control, "\n    ");
+  list.append("\n    ", element, "\n  ");
+  container.append("\n  ", list, "\n  ", popover, "\n");
   return container;
 };
 export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
   description: "With a description",
   label: "This is a resource item",
-  menuTriggerId: "trigger",
 };

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

@@ -78,9 +78,9 @@ export class SwirlSelect {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, id: `trigger-${this.selectId}`, readOnly: true, type: "text", value: label }), h("span", { class: "select__multi-select-values" }, (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => this.options.find((option) => option.value === value))) === null || _c === void 0 ? void 0 : _c.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option === null || option === void 0 ? void 0 : option.label,
+    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" }, (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => this.options.find((option) => option.value === value))) === null || _c === void 0 ? void 0 : _c.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option === null || option === void 0 ? void 0 : option.label,
       // eslint-disable-next-line react/jsx-no-bind
-      onRemove: () => this.unselectOption(option === null || option === void 0 ? void 0 : 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", label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: `select-options-${this.selectId}`, ref: (el) => (this.popover = el), trigger: `trigger-${this.selectId}`, 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 === null || option === void 0 ? void 0 : 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 }))))));
   }
   static get is() { return "swirl-select"; }
   static get encapsulation() { return "scoped"; }

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

@@ -26,12 +26,14 @@ describe("swirl-select", () => {
     expect(page.root).toEqualHtml(`
       <swirl-select invalid="true" label="Select" required="true">
         <div class="select select--placement-undefined">
-          <input aria-invalid="true" class="select__input" id="trigger-${page.root.selectId}" readonly="" type="text" value="">
+          <swirl-popover-trigger>
+            <input aria-invalid="true" class="select__input" readonly="" type="text" value="">
+          </swirl-popover-trigger>
           <span class="select__multi-select-values"></span>
           <span class="select__indicator">
             <swirl-icon-expand-more></swirl-icon-expand-more>
           </span>
-          <swirl-popover animation="scale-in-y" class="select__popover" label="Select" popoverid="select-options-${page.root.selectId}" trigger="trigger-${page.root.selectId}" usecontainerwidth="swirl-form-control">
+          <swirl-popover animation="scale-in-y" class="select__popover" id="select-options-${page.root.selectId}" label="Select" usecontainerwidth="swirl-form-control">
             <swirl-option-list allowdeselect="">
               <swirl-option-list-item label="This is an option 1" value="1"></swirl-option-list-item>
               <swirl-option-list-item label="This is an option 2" value="2"></swirl-option-list-item>

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -46,6 +46,7 @@ export class FileManager {
     };
     this.selectedDirectory = undefined;
     this.selectedFile = undefined;
+    this.sortMenu = undefined;
   }
   renderNavigation() {
     const items = Boolean(this.selectedDirectory)
@@ -57,14 +58,15 @@ export class FileManager {
   }
   render() {
     var _a, _b;
-    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name }), h("swirl-text", { color: "subdued", truncate: true }, (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", popoverId: "sort-menu", trigger: "sort-button" }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name }), h("swirl-text", { color: "subdued", truncate: true }, (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
   }
   static get is() { return "file-manager"; }
   static get encapsulation() { return "shadow"; }
   static get states() {
     return {
       "selectedDirectory": {},
-      "selectedFile": {}
+      "selectedFile": {},
+      "sortMenu": {}
     };
   }
 }