@getflip/swirl-components 0.78.1 → 0.80.0

package/dist/cjs/{swirl-popover.cjs.entry.js → swirl-popover_2.cjs.entry.js}

@@ -61,8 +61,8 @@ const SwirlPopover = class {
     this.label = undefined;
     this.maxHeight = "22rem";
     this.offset = 8;
-    this.placement = "bottom-start";
     this.popoverId = undefined;
+    this.placement = "bottom-start";
     this.trigger = undefined;
     this.triggerContainer = undefined;
     this.useContainerWidth = undefined;
@@ -72,13 +72,16 @@ const SwirlPopover = class {
   }
   componentDidLoad() {
     this.connectTrigger();
-    this.updateFocusableChildren();
     this.updateTriggerAttributes();
+    if (Boolean(this.trigger)) {
+      console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
+    }
   }
   disconnectedCallback() {
     this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
+    var _a;
     if (!this.active) {
       return;
     }
@@ -89,7 +92,7 @@ const SwirlPopover = class {
     const popoverLostFocus = !this.el.contains(target) &&
       !this.el.contains(activeElement) &&
       target !== this.triggerEl &&
-      !this.triggerEl.contains(target) &&
+      !((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
       (!isSafari ||
         (isSafari &&
           !this.el.contains(relatedTarget || target) &&
@@ -109,7 +112,7 @@ const SwirlPopover = class {
       .some((el) => Boolean(el) && el instanceof Node
       ? this.el.contains(el)
       : false);
-    const clickedTrigger = event.target === this.triggerEl;
+    const clickedTrigger = target === this.triggerEl;
     if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
       this.close();
     }
@@ -140,19 +143,20 @@ const SwirlPopover = class {
    * Open the popover.
    * @returns
    */
-  async open() {
-    if (this.active) {
+  async open(triggerEl) {
+    this.triggerEl = triggerEl || this.triggerEl;
+    if (this.active || !Boolean(this.triggerEl)) {
       return;
     }
     this.adjustWidth();
     this.active = true;
-    this.updateFocusableChildren();
     this.updateTriggerAttributes();
+    const focusableChildren = this.getFocusableChildren();
     requestAnimationFrame(async () => {
       await this.reposition();
       this.popoverOpen.emit({ position: this.position });
-      if (this.focusableChildren.length > 0) {
-        this.focusableChildren[0].focus();
+      if (focusableChildren.length > 0) {
+        focusableChildren[0].focus();
       }
       else {
         this.contentContainer.focus();
@@ -160,12 +164,16 @@ const SwirlPopover = class {
       if (this.disableAutoUpdate) {
         this.disableAutoUpdate();
       }
-      this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(this.triggerEl, this.contentContainer, () => this.reposition());
       this.scrollContainer.scrollTop = 0;
       this.lockBodyScroll();
     });
   }
   connectTrigger() {
+    if (!Boolean(this.trigger)) {
+      this.triggerEl = undefined;
+      return;
+    }
     this.triggerEl =
       typeof this.trigger === "string"
         ? utils.querySelectorAllDeep(this.triggerContainer || document.body, `#${this.trigger}`)[0]
@@ -178,10 +186,10 @@ const SwirlPopover = class {
     });
   }
   getNativeTriggerElement() {
-    var _a, _b, _c;
-    return this.triggerEl.tagName.startsWith("SWIRL-")
-      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+    var _a, _b, _c, _d;
+    return ((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.tagName.startsWith("SWIRL-"))
+      ? (((_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.children[0]) ||
+        ((_d = (_c = this.triggerEl) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.children[0]) ||
         this.triggerEl)
       : this.triggerEl;
   }
@@ -190,12 +198,12 @@ const SwirlPopover = class {
       return;
     }
     const nativeTriggerEl = this.getNativeTriggerElement();
-    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-controls", this.el.id);
     nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
     nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
-  updateFocusableChildren() {
-    this.focusableChildren = utils.querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
+  getFocusableChildren() {
+    return utils.querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
   }
   adjustWidth() {
     let useContainerWidth = this.useContainerWidth;
@@ -242,7 +250,7 @@ const SwirlPopover = class {
       "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
       "popover--inactive": !this.active,
     });
-    return (index.h(index.Host, { id: this.popoverId }, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+    return (index.h(index.Host, null, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
         top: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.y}px` : "",
         left: Boolean(this.position) ? `${(_c = this.position) === null || _c === void 0 ? void 0 : _c.x}px` : "",
       }, tabindex: "-1" }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
@@ -255,4 +263,83 @@ const SwirlPopover = class {
 };
 SwirlPopover.style = swirlPopoverCss;
 
+const swirlPopoverTriggerCss = ".sc-swirl-popover-trigger-h{display:contents}";
+
+const SwirlPopoverTrigger = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, { onClick: this.onClick }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "popover": ["watchPopover"]
+  }; }
+};
+SwirlPopoverTrigger.style = swirlPopoverTriggerCss;
+
 exports.swirl_popover = SwirlPopover;
+exports.swirl_popover_trigger = SwirlPopoverTrigger;

package/dist/cjs/swirl-select.cjs.entry.js

@@ -87,9 +87,9 @@ const SwirlSelect = class {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.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 }), index.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) => (index.h("swirl-tag", { "aria-hidden": "true", label: option === null || option === void 0 ? void 0 : option.label,
+    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.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 })), index.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) => (index.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 })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option === null || option === void 0 ? void 0 : option.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   get el() { return index.getElement(this); }
 };