Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 424839a

Browse files
agligaagliga
authored
feat(floating-ui): added support for floating-ui in dropdowns (#2523)
1 parent 9a06f44 commit 424839a

28 files changed

+273
-134
lines changed

‎dist/chips-combobox/chips-combobox.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
transition: transform 0.2s linear;
6161
}
6262

63-
.chips-combobox .combobox__listbox {
63+
.chips-combobox .combobox__listbox--set-position {
6464
top: calc(100% + var(--spacing-150));
6565
}
6666

‎dist/combobox/combobox.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,17 @@ span.combobox {
3838
display: none;
3939
left: 0;
4040
max-height: 400px;
41-
min-width: 100%;
4241
overflow-y: auto;
4342
position: absolute;
43+
top: 0;
44+
width: -moz-fit-content;
45+
width: fit-content;
46+
z-index: 2;
47+
}
48+
.combobox__listbox--set-position {
49+
min-width: 100%;
4450
top: calc(100% + 4px);
4551
width: auto;
46-
z-index: 2;
4752
}
4853

4954
.combobox__listbox--reverse,

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,23 +152,26 @@ button.filter-menu-button__button[aria-pressed="true"][disabled]:hover {
152152
border-radius: 16px;
153153
box-shadow: var(--bubble-shadow);
154154
display: none;
155-
max-width: 288px;
156155
min-width: 144px;
157156
overflow: hidden;
158157
position: absolute;
159-
top: calc(100% + 8px);
158+
top: 0;
160159
width: max-content;
161160
z-index: 1;
162161
}
163162

163+
.filter-menu-button__menu--set-position {
164+
top: calc(100% + 8px);
165+
}
166+
164167
button.filter-menu-button__button[aria-expanded="true"]
165168
+ .filter-menu-button__menu {
166169
display: block;
167170
}
168171

169172
.filter-menu-button__items {
170173
margin-top: 8px;
171-
max-height: calc(50vh - 40px);
174+
max-height: 400px;
172175
min-width: 100%;
173176
overflow-y: auto;
174177
position: relative;

‎dist/listbox-button/listbox-button.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,17 @@ div.listbox-button__listbox {
3737
display: none;
3838
left: 0;
3939
max-height: 400px;
40-
min-width: 100%;
4140
overflow-y: auto;
4241
position: absolute;
42+
top: 0;
43+
width: -moz-fit-content;
44+
width: fit-content;
45+
z-index: 2;
46+
}
47+
div.listbox-button__listbox--set-position {
48+
min-width: 100%;
4349
top: calc(100% + 4px);
4450
width: auto;
45-
z-index: 2;
4651
}
4752
[dir="rtl"] div.listbox-button__listbox {
4853
left: unset;

‎dist/menu-button/menu-button.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,19 @@
2323
display: none;
2424
left: 0;
2525
max-height: 400px;
26-
min-width: 100%;
2726
outline: 0;
2827
overflow-y: auto;
2928
position: absolute;
29+
top: 0;
30+
width: -moz-fit-content;
31+
width: fit-content;
32+
z-index: 2;
33+
}
34+
.fake-menu-button__menu--set-position,
35+
.menu-button__menu--set-position {
36+
min-width: 100%;
3037
top: calc(100% + 4px);
3138
width: auto;
32-
z-index: 2;
3339
}
3440
[dir="rtl"] .fake-menu-button__menu,
3541
[dir="rtl"] .menu-button__menu {

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"@commitlint/cli": "^19.6.1",
7777
"@commitlint/config-conventional": "^19.6.0",
7878
"@ebay/browserslist-config": "^2.10.0",
79-
"@floating-ui/dom": "^1.6.12",
79+
"@floating-ui/dom": "^1.6.13",
8080
"@marko/run": "^0.5.13",
8181
"@marko/run-adapter-static": "^0.2.1",
8282
"@percy/cli": "^1.30.5",

‎src/routes/main.js‎

Lines changed: 122 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141
flip,
4242
computePosition,
4343
shift,
44+
size,
4445
offset,
4546
arrow,
4647
inline,
@@ -82,6 +83,60 @@ const debounce = (func, wait) => {
8283
};
8384
};
8485

86+
class PopperDropdown {
87+
constructor(widgetEl, hostSelector, overlaySelector) {
88+
this.el = widgetEl;
89+
if (!hostSelector) {
90+
this.host = widgetEl;
91+
} else {
92+
this.host = widgetEl.querySelector(hostSelector);
93+
}
94+
this.overlay = widgetEl.querySelector(overlaySelector);
95+
96+
if (this.host && this.overlay) {
97+
this.isInitialized = true;
98+
}
99+
}
100+
101+
attachEvents() {
102+
this.el.addEventListener("expander-expand", () => {
103+
this.show();
104+
});
105+
this.el.addEventListener("expander-collapse", () => {
106+
this.hide();
107+
});
108+
}
109+
110+
init() {
111+
this.cleanup = autoUpdate(
112+
this.host,
113+
this.overlay,
114+
this.update.bind(this),
115+
);
116+
}
117+
118+
update() {
119+
if (this.isInitialized) {
120+
computePosition(this.host, this.overlay, {
121+
placement: "bottom-start",
122+
middleware: [offset(4), flip(), shift()],
123+
}).then(({ x, y }) => {
124+
Object.assign(this.overlay.style, {
125+
left: `${x}px`,
126+
top: `${y}px`,
127+
});
128+
});
129+
}
130+
}
131+
132+
show() {
133+
this.init();
134+
}
135+
hide() {
136+
if (this.cleanup) this.cleanup();
137+
}
138+
}
139+
85140
// BUSY BUTTON
86141
document.getElementById("busy-button")?.addEventListener("click", function () {
87142
const button = this;
@@ -132,17 +187,31 @@ document.querySelectorAll(".expand-btn").forEach(function (el) {
132187
});
133188
});
134189

135-
document
136-
.querySelectorAll(".filter-menu-button--form button")
137-
.forEach(function (el) {
138-
el.addEventListener("click", function () {
139-
const isExpanded = this.getAttribute("aria-expanded") === "true";
140-
this.setAttribute("aria-expanded", !isExpanded);
141-
});
190+
document.querySelectorAll(".filter-menu-button--form").forEach(function (el) {
191+
const popperDropdown = new PopperDropdown(
192+
el,
193+
"button",
194+
".filter-menu-button__menu",
195+
);
196+
el.querySelector("button").addEventListener("click", function () {
197+
const isExpanded = this.getAttribute("aria-expanded") === "true";
198+
this.setAttribute("aria-expanded", !isExpanded);
199+
if (isExpanded) {
200+
popperDropdown.hide();
201+
} else {
202+
popperDropdown.show();
203+
}
142204
});
205+
});
143206

144207
// FAKE MENU BUTTON
145208
document.querySelectorAll(".fake-menu-button").forEach(function (widgetEl) {
209+
let popperDropdown = new PopperDropdown(
210+
widgetEl,
211+
"button",
212+
".fake-menu-button__menu",
213+
);
214+
146215
let hostSelector = ".icon-btn";
147216
if (widgetEl.querySelector(".expand-btn")) {
148217
hostSelector = ".expand-btn";
@@ -160,12 +229,21 @@ document.querySelectorAll(".fake-menu-button").forEach(function (widgetEl) {
160229
hostSelector,
161230
}),
162231
);
232+
popperDropdown.attachEvents();
163233
});
164234

165235
// COMBOBOX
166236
document.querySelectorAll(".combobox").forEach(function (widgetEl) {
167237
pageWidgets.push(new Combobox(widgetEl));
168238

239+
if (!widgetEl.parentElement.classList.contains("chips-combobox")) {
240+
let popperDropdown = new PopperDropdown(
241+
widgetEl,
242+
"input",
243+
".combobox__listbox",
244+
);
245+
popperDropdown.attachEvents();
246+
}
169247
widgetEl.addEventListener("makeup-combobox-change", logEvent);
170248
});
171249

@@ -557,6 +635,12 @@ document.querySelectorAll(".listbox-button").forEach(function (widgetEl) {
557635
return;
558636
}
559637

638+
let popperDropdown = new PopperDropdown(
639+
widgetEl,
640+
"button",
641+
".listbox-button__listbox",
642+
);
643+
560644
const options = {
561645
autoSelect: widgetEl.dataset.makeupAutoSelect === "true",
562646
buttonLabelSelector: ".btn__text",
@@ -567,6 +651,7 @@ document.querySelectorAll(".listbox-button").forEach(function (widgetEl) {
567651

568652
pageWidgets.push(new ListboxButton(widgetEl, options));
569653

654+
popperDropdown.attachEvents();
570655
widgetEl.addEventListener("makeup-listbox-button-change", (e) => {
571656
console.log(e.type, e.detail);
572657
});
@@ -585,6 +670,12 @@ document
585670

586671
pageWidgets.push(new ListboxButton(widgetEl, options));
587672

673+
let popperDropdown = new PopperDropdown(
674+
widgetEl,
675+
"button",
676+
".listbox-button__listbox",
677+
);
678+
588679
widgetEl.addEventListener("makeup-listbox-button-change", (e) => {
589680
console.log(e.type, e.detail);
590681
const selectedOption = widgetEl.querySelector(
@@ -595,14 +686,24 @@ document
595686
).textContent =
596687
`+${selectedOption.querySelector("span.fflag")?.dataset.countryCode}`;
597688
});
689+
690+
popperDropdown.attachEvents();
598691
});
599692

600693
document.querySelectorAll(".menu-button").forEach(function (widgetEl) {
694+
const popperDropdown = new PopperDropdown(
695+
widgetEl,
696+
"button",
697+
".menu-button__menu",
698+
);
699+
601700
const widget = new MenuButton(widgetEl, {
602701
menuSelector: ".menu-button__menu",
603702
buttonTextSelector: `.btn__text`,
604703
});
605704

705+
popperDropdown.attachEvents();
706+
606707
widget.menu.el.addEventListener("makeup-menu-select", logEvent);
607708
widget.menu.el.addEventListener("makeup-menu-change", logEvent);
608709
});
@@ -614,9 +715,16 @@ document
614715
expandedClass: "filter-menu-button--expanded",
615716
menuSelector: ".filter-menu-button__menu",
616717
});
718+
const popperDropdown = new PopperDropdown(
719+
widgetEl,
720+
"button",
721+
".filter-menu-button__menu",
722+
);
617723

618724
widget.menu.el.addEventListener("makeup-menu-select", logEvent);
619725
widget.menu.el.addEventListener("makeup-menu-change", logEvent);
726+
727+
popperDropdown.attachEvents();
620728
});
621729

622730
document.querySelectorAll(".menu").forEach(function (widgetEl) {
@@ -859,6 +967,13 @@ document.querySelectorAll(".field").forEach(function (elCharContainer) {
859967
document
860968
.querySelectorAll(".chips-combobox")
861969
.forEach(function (elChipsCombobox) {
970+
let popperDropdown = new PopperDropdown(
971+
elChipsCombobox,
972+
null,
973+
".combobox__listbox",
974+
);
975+
popperDropdown.attachEvents();
976+
862977
const elChipsItems = elChipsCombobox.querySelector(
863978
".chips-combobox__items",
864979
),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
transition: transform 200ms linear;
6363
}
6464

65-
.chips-combobox .combobox__listbox {
65+
.chips-combobox .combobox__listbox--set-position {
6666
top: calc(100% + var(--spacing-150));
6767
}
6868

0 commit comments

Comments
 (0)