Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)

Fix/book 149 incorrect onfocus behaviour booking widget

* fix(BOOK-149): fixed labels shifting

* fix(BOOK-149): reintroduced sticky position

* fix(BOOK-149): added missing border to "where" text field

* added overflow to datepicker

* comment fixes

* removed separate typography declaration

* changed to onPress

* fix(BOOK-149): moved components to separate files

* fix(BOOK-149): removed desktop & mobile specific css classes

* fix(BOOK-149): new implementation of date and room modals

* dependencies update

* fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height

* updated info button to new variant

* fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode

* fixed overlay issue and added focus indicator on mobile

* fixed missing space in css

* rebase and fixed icon buttons after update

* simplified to use explicit boolean

* PR comments fixes

* more PR comment fixes

* PR comment fixes

* fixed setIsOpen((prev) => !prev)

* fixed issues with room error not showing properly on mobile

* fixing pr comments

* fixed flickering on GuestRoomModal


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css

@@ -1,6 +1,7 @@
-.btn {
+.triggerButton {
   background: none;
   border: none;
+  color: var(--Text-Default);
   cursor: pointer;
   outline: none;
   padding: 0;
@@ -12,55 +13,63 @@
   bottom: 0;
   right: 0;
   padding: 20px var(--Space-x15) 0;
+  border-radius: var(--Corner-radius-lg);
 }
 
-.body {
-  color: var(--Text-Default);
-}
-
-.hideWrapper {
-  background-color: var(--Main-Grey-White);
-  display: none;
-}
-
-.container[data-datepicker-open="true"] .hideWrapper {
+.datePicker[data-datepicker-open="true"] {
   display: block;
 }
 
+.pickerContainer {
+  --header-height: 72px;
+  --sticky-button-height: 140px;
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
+  transition: top 300ms ease;
+  overflow: scroll;
+  z-index: var(--booking-widget-z-index);
+}
+
 @media screen and (max-width: 1366px) {
-  .container {
-    z-index: 10001;
+  .datePicker {
     height: 24px;
   }
 
-  .hideWrapper {
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    position: fixed;
-    right: 0;
-    top: 100%;
-    transition: top 300ms ease;
-    z-index: 10001;
-  }
-
-  .container[data-datepicker-open="true"] .hideWrapper {
+  .datePicker[data-datepicker-open="true"] {
     border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
     top: calc(max(var(--sitewide-alert-sticky-height), 20px));
   }
 }
 
 @media screen and (min-width: 1367px) {
-  .hideWrapper {
+  .datePicker {
+    display: block;
+  }
+
+  .pickerContainer {
+    position: absolute;
+    display: grid;
     border-radius: var(--Corner-radius-lg);
     box-shadow: var(--popup-box-shadow);
     padding: var(--Space-x2) var(--Space-x3);
-    position: absolute;
-    /**
-      BookingWidget padding +
-      border-width +
-      wanted space below booking widget
-     */
-    top: calc(100% + var(--Space-x1) + 1px + var(--Space-x4));
+    max-width: calc(100vw - 20px);
+    max-height: 440px;
+    top: calc(100% + 36px);
+    left: auto;
+    right: auto;
+    bottom: auto;
+    overflow: visible;
+  }
+
+  .triggerButton {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: var(--Corner-radius-md);
   }
 }