feat(date-textbox): added floating-ui support (#2529)

Author: agliga

.changeset/smart-bugs-turn.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+feat(floating-ui): added support in date-textbox

dist/date-textbox/date-textbox.css

@@ -4,6 +4,7 @@
 }
 .date-textbox {
     --calendar-month-width: 311px;
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {

src/routes/_index/component/date-textbox/+page.marko

@@ -44,7 +44,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                     >
                         <svg
                             aria-hidden="true"
@@ -420,7 +419,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                         disabled
                     >
                         <svg
@@ -485,7 +483,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                     >
                         <svg
                             aria-hidden="true"

src/routes/main.js

@@ -187,6 +187,23 @@ document.querySelectorAll(".expand-btn").forEach(function (el) {
     });
 });
 
+document.querySelectorAll(".date-textbox").forEach(function (el) {
+    const popperDropdown = new PopperDropdown(
+        el,
+        null,
+        ".date-textbox__popover",
+    );
+
+    el.querySelector("button").addEventListener("click", function () {
+        this.parentElement.nextElementSibling.toggleAttribute("hidden");
+        if (this.parentElement.nextElementSibling.hasAttribute("hidden")) {
+            popperDropdown.hide();
+        } else {
+            popperDropdown.show();
+        }
+    });
+});
+
 document.querySelectorAll(".filter-menu-button--form").forEach(function (el) {
     const popperDropdown = new PopperDropdown(
         el,

src/sass/date-textbox/date-textbox.scss

@@ -5,6 +5,8 @@
 .date-textbox {
     /* 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS] */
     --calendar-month-width: 311px;
+
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {