feat(floating-ui): added support for floating-ui in dropdowns (#2523)

dist/chips-combobox/chips-combobox.css

@@ -60,7 +60,7 @@
     transition: transform 0.2s linear;
 }
 
-.chips-combobox .combobox__listbox {
+.chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }
 

dist/combobox/combobox.css

@@ -38,12 +38,17 @@ span.combobox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.combobox__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 
 .combobox__listbox--reverse,

dist/filter-menu-button/filter-menu-button.css

@@ -152,23 +152,26 @@ button.filter-menu-button__button[aria-pressed="true"][disabled]:hover {
     border-radius: 16px;
     box-shadow: var(--bubble-shadow);
     display: none;
-    max-width: 288px;
     min-width: 144px;
     overflow: hidden;
     position: absolute;
-    top: calc(100% + 8px);
+    top: 0;
     width: max-content;
     z-index: 1;
 }
 
+.filter-menu-button__menu--set-position {
+    top: calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded="true"]
     + .filter-menu-button__menu {
     display: block;
 }
 
 .filter-menu-button__items {
     margin-top: 8px;
-    max-height: calc(50vh - 40px);
+    max-height: 400px;
     min-width: 100%;
     overflow-y: auto;
     position: relative;

dist/listbox-button/listbox-button.css

@@ -37,12 +37,17 @@ div.listbox-button__listbox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+div.listbox-button__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] div.listbox-button__listbox {
     left: unset;

dist/menu-button/menu-button.css

@@ -23,13 +23,19 @@
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     outline: 0;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.fake-menu-button__menu--set-position,
+.menu-button__menu--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] .fake-menu-button__menu,
 [dir="rtl"] .menu-button__menu {

package.json

@@ -76,7 +76,7 @@
         "@commitlint/cli": "^19.6.1",
         "@commitlint/config-conventional": "^19.6.0",
         "@ebay/browserslist-config": "^2.10.0",
-        "@floating-ui/dom": "^1.6.12",
+        "@floating-ui/dom": "^1.6.13",
         "@marko/run": "^0.5.13",
         "@marko/run-adapter-static": "^0.2.1",
         "@percy/cli": "^1.30.5",

src/routes/main.js

@@ -41,6 +41,7 @@ import {
     flip,
     computePosition,
     shift,
+    size,
     offset,
     arrow,
     inline,
@@ -82,6 +83,60 @@ const debounce = (func, wait) => {
     };
 };
 
+class PopperDropdown {
+    constructor(widgetEl, hostSelector, overlaySelector) {
+        this.el = widgetEl;
+        if (!hostSelector) {
+            this.host = widgetEl;
+        } else {
+            this.host = widgetEl.querySelector(hostSelector);
+        }
+        this.overlay = widgetEl.querySelector(overlaySelector);
+
+        if (this.host && this.overlay) {
+            this.isInitialized = true;
+        }
+    }
+
+    attachEvents() {
+        this.el.addEventListener("expander-expand", () => {
+            this.show();
+        });
+        this.el.addEventListener("expander-collapse", () => {
+            this.hide();
+        });
+    }
+
+    init() {
+        this.cleanup = autoUpdate(
+            this.host,
+            this.overlay,
+            this.update.bind(this),
+        );
+    }
+
+    update() {
+        if (this.isInitialized) {
+            computePosition(this.host, this.overlay, {
+                placement: "bottom-start",
+                middleware: [offset(4), flip(), shift()],
+            }).then(({ x, y }) => {
+                Object.assign(this.overlay.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        }
+    }
+
+    show() {
+        this.init();
+    }
+    hide() {
+        if (this.cleanup) this.cleanup();
+    }
+}
+
 // BUSY BUTTON
 document.getElementById("busy-button")?.addEventListener("click", function () {
     const button = this;
@@ -132,17 +187,31 @@ document.querySelectorAll(".expand-btn").forEach(function (el) {
     });
 });
 
-document
-    .querySelectorAll(".filter-menu-button--form button")
-    .forEach(function (el) {
-        el.addEventListener("click", function () {
-            const isExpanded = this.getAttribute("aria-expanded") === "true";
-            this.setAttribute("aria-expanded", !isExpanded);
-        });
+document.querySelectorAll(".filter-menu-button--form").forEach(function (el) {
+    const popperDropdown = new PopperDropdown(
+        el,
+        "button",
+        ".filter-menu-button__menu",
+    );
+    el.querySelector("button").addEventListener("click", function () {
+        const isExpanded = this.getAttribute("aria-expanded") === "true";
+        this.setAttribute("aria-expanded", !isExpanded);
+        if (isExpanded) {
+            popperDropdown.hide();
+        } else {
+            popperDropdown.show();
+        }
     });
+});
 
 // FAKE MENU BUTTON
 document.querySelectorAll(".fake-menu-button").forEach(function (widgetEl) {
+    let popperDropdown = new PopperDropdown(
+        widgetEl,
+        "button",
+        ".fake-menu-button__menu",
+    );
+
     let hostSelector = ".icon-btn";
     if (widgetEl.querySelector(".expand-btn")) {
         hostSelector = ".expand-btn";
@@ -160,12 +229,21 @@ document.querySelectorAll(".fake-menu-button").forEach(function (widgetEl) {
             hostSelector,
         }),
     );
+    popperDropdown.attachEvents();
 });
 
 // COMBOBOX
 document.querySelectorAll(".combobox").forEach(function (widgetEl) {
     pageWidgets.push(new Combobox(widgetEl));
 
+    if (!widgetEl.parentElement.classList.contains("chips-combobox")) {
+        let popperDropdown = new PopperDropdown(
+            widgetEl,
+            "input",
+            ".combobox__listbox",
+        );
+        popperDropdown.attachEvents();
+    }
     widgetEl.addEventListener("makeup-combobox-change", logEvent);
 });
 
@@ -557,6 +635,12 @@ document.querySelectorAll(".listbox-button").forEach(function (widgetEl) {
         return;
     }
 
+    let popperDropdown = new PopperDropdown(
+        widgetEl,
+        "button",
+        ".listbox-button__listbox",
+    );
+
     const options = {
         autoSelect: widgetEl.dataset.makeupAutoSelect === "true",
         buttonLabelSelector: ".btn__text",
@@ -567,6 +651,7 @@ document.querySelectorAll(".listbox-button").forEach(function (widgetEl) {
 
     pageWidgets.push(new ListboxButton(widgetEl, options));
 
+    popperDropdown.attachEvents();
     widgetEl.addEventListener("makeup-listbox-button-change", (e) => {
         console.log(e.type, e.detail);
     });
@@ -585,6 +670,12 @@ document
 
         pageWidgets.push(new ListboxButton(widgetEl, options));
 
+        let popperDropdown = new PopperDropdown(
+            widgetEl,
+            "button",
+            ".listbox-button__listbox",
+        );
+
         widgetEl.addEventListener("makeup-listbox-button-change", (e) => {
             console.log(e.type, e.detail);
             const selectedOption = widgetEl.querySelector(
@@ -595,14 +686,24 @@ document
             ).textContent =
                 `+${selectedOption.querySelector("span.fflag")?.dataset.countryCode}`;
         });
+
+        popperDropdown.attachEvents();
     });
 
 document.querySelectorAll(".menu-button").forEach(function (widgetEl) {
+    const popperDropdown = new PopperDropdown(
+        widgetEl,
+        "button",
+        ".menu-button__menu",
+    );
+
     const widget = new MenuButton(widgetEl, {
         menuSelector: ".menu-button__menu",
         buttonTextSelector: `.btn__text`,
     });
 
+    popperDropdown.attachEvents();
+
     widget.menu.el.addEventListener("makeup-menu-select", logEvent);
     widget.menu.el.addEventListener("makeup-menu-change", logEvent);
 });
@@ -614,9 +715,16 @@ document
             expandedClass: "filter-menu-button--expanded",
             menuSelector: ".filter-menu-button__menu",
         });
+        const popperDropdown = new PopperDropdown(
+            widgetEl,
+            "button",
+            ".filter-menu-button__menu",
+        );
 
         widget.menu.el.addEventListener("makeup-menu-select", logEvent);
         widget.menu.el.addEventListener("makeup-menu-change", logEvent);
+
+        popperDropdown.attachEvents();
     });
 
 document.querySelectorAll(".menu").forEach(function (widgetEl) {
@@ -859,6 +967,13 @@ document.querySelectorAll(".field").forEach(function (elCharContainer) {
     document
         .querySelectorAll(".chips-combobox")
         .forEach(function (elChipsCombobox) {
+            let popperDropdown = new PopperDropdown(
+                elChipsCombobox,
+                null,
+                ".combobox__listbox",
+            );
+            popperDropdown.attachEvents();
+
             const elChipsItems = elChipsCombobox.querySelector(
                     ".chips-combobox__items",
                 ),

src/sass/chips-combobox/chips-combobox.scss

@@ -62,7 +62,7 @@
     transition: transform 200ms linear;
 }
 
-.chips-combobox .combobox__listbox {
+.chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }