Merged in fix/book-149-datepicker-overflowing (pull request #3433)

Fix/optimizations and cleanup of booking widget

* fix(BOOK-149):fixed issue with datepicker overflowing on months spanning more weeks

* fix(BOOK-149): added smooth scroll to age selector to avoid clipping the selector

* cleanup in trigger and css

* update to new Button componenet to fix missing focus indicator

* included color token in triggerbutton class instead


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/index.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react"
 import { FocusScope, useOverlay } from "react-aria"
-import { Button } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
@@ -148,8 +148,7 @@ export default function GuestsRoomsPickerForm({
       <div className={styles.container}>
         <Trigger
           rooms={rooms}
-          className={styles.trigger}
-          triggerFn={() => {
+          onPress={() => {
             setIsOpen((prev) => !prev)
             if (!isDesktop && !isOpen) {
               lockScroll()
@@ -197,13 +196,11 @@ export default function GuestsRoomsPickerForm({
 
 function Trigger({
   rooms,
-  className,
-  triggerFn,
+  onPress,
   ariaLabelledBy,
 }: {
   rooms: GuestsRoom[]
-  className: string
-  triggerFn?: () => void
+  onPress?: () => void
   ariaLabelledBy?: string
 }) {
   const intl = useIntl()
@@ -244,15 +241,15 @@ function Trigger({
   }
 
   return (
-    <Button
-      className={`${className} ${styles.btn}`}
-      type="button"
-      onPress={triggerFn}
-      aria-labelledby={ariaLabelledBy}
-    >
-      <Typography variant="Body/Paragraph/mdRegular">
-        <span className={styles.guestsAndRooms}>{parts.join(", ")}</span>
-      </Typography>
-    </Button>
+    <Typography variant="Body/Paragraph/mdRegular">
+      <ButtonRAC
+        className={styles.triggerButton}
+        type="button"
+        onPress={onPress}
+        aria-labelledby={ariaLabelledBy}
+      >
+        {parts.join(", ")}
+      </ButtonRAC>
+    </Typography>
   )
 }