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/BookingWidgetForm/FormContent/BookingCode/BookingCodeError/booking-code-error.module.css

@@ -0,0 +1,28 @@
+.errorContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.error {
+  display: flex;
+  gap: var(--Space-x1);
+  text-wrap: wrap;
+  color: var(--UI-Text-Error);
+}
+
+.removeButton {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .error {
+    color: var(--Text-Default);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .removeButton {
+    display: none;
+  }
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/BookingCodeError/index.tsx

@@ -0,0 +1,48 @@
+import { type FieldError } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useBookingFlowConfig } from "../../../../../../bookingFlowConfig/bookingFlowConfigContext"
+import { getErrorMessage } from "../../../../../BookingFlowInput/errors"
+import { RemoveExtraRooms } from "../../RemoveExtraRooms/RemoveExtraRooms"
+import { isMultiRoomError } from "../../utils"
+
+import styles from "./booking-code-error.module.css"
+
+export function BookingCodeError({
+  codeError,
+  isDesktop = false,
+}: {
+  codeError: FieldError
+  isDesktop?: boolean
+}) {
+  const intl = useIntl()
+  const isMultiroomError = isMultiRoomError(codeError.message)
+  const config = useBookingFlowConfig()
+
+  return (
+    <div className={styles.errorContainer}>
+      <Typography
+        className={styles.error}
+        variant="Body/Supporting text (caption)/smRegular"
+      >
+        <span>
+          <MaterialIcon
+            size={20}
+            icon="error"
+            color="Icon/Feedback/Error"
+            isFilled={!isDesktop}
+          />
+          {getErrorMessage(intl, config.variant, codeError.message)}
+        </span>
+      </Typography>
+      {isMultiroomError ? (
+        <div className={styles.removeButton}>
+          <RemoveExtraRooms />
+        </div>
+      ) : null}
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/CodeRulesModal/code-rules-modal.module.css

@@ -0,0 +1,11 @@
+.bookingCodeTooltip {
+  max-width: 560px;
+  margin-top: var(--Space-x2);
+  color: var(--Text-Secondary);
+}
+.infoButton {
+  align-self: center;
+  color: var(
+    --Icon-Interactive-Placeholder
+  ) !important; /* Override IconButton default color */
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/CodeRulesModal/index.tsx

@@ -0,0 +1,50 @@
+import { useIntl } from "react-intl"
+
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import Modal from "@scandic-hotels/design-system/Modal"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./code-rules-modal.module.css"
+
+export default function CodeRulesModal() {
+  const intl = useIntl()
+  const codeVoucher = intl.formatMessage({
+    id: "booking.codeVoucher",
+    defaultMessage: "Code / Voucher",
+  })
+  const bookingCodeTooltipText = intl.formatMessage({
+    id: "bookingWidget.bookingCode.tooltip",
+    defaultMessage:
+      "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
+  })
+
+  const infoButtonAriaLabel = intl.formatMessage(
+    {
+      id: "bookingWidget.bookingCode.readMore",
+      defaultMessage: "Read more about using {codeVoucher}",
+    },
+    {
+      codeVoucher,
+    }
+  )
+
+  return (
+    <Modal
+      trigger={
+        <IconButton
+          variant="Muted"
+          emphasis
+          size="sm"
+          aria-label={infoButtonAriaLabel}
+          iconName="info"
+          className={styles.infoButton}
+        />
+      }
+      title={codeVoucher}
+    >
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.bookingCodeTooltip}>{bookingCodeTooltipText}</p>
+      </Typography>
+    </Modal>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/RememberCode/index.tsx

@@ -0,0 +1,49 @@
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./remember-code.module.css"
+
+type CodeRememberProps = {
+  bookingCodeValue: string | undefined
+  onApplyClick: () => void
+}
+
+export function RememberCode({
+  bookingCodeValue,
+  onApplyClick,
+}: CodeRememberProps) {
+  const intl = useIntl()
+
+  const checkBoxLabel = intl.formatMessage({
+    id: "bookingWidget.bookingCode.remember",
+    defaultMessage: "Remember code",
+  })
+  return (
+    <>
+      <Checkbox name="bookingCode.remember" disabled={!bookingCodeValue}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>{checkBoxLabel}</span>
+        </Typography>
+      </Checkbox>
+
+      <Button
+        size="sm"
+        className={styles.applyButton}
+        variant="Secondary"
+        wrapping
+        color="Primary"
+        type="button"
+        isDisabled={!bookingCodeValue}
+        onPress={onApplyClick}
+      >
+        {intl.formatMessage({
+          id: "common.apply",
+          defaultMessage: "Apply",
+        })}
+      </Button>
+    </>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/RememberCode/remember-code.module.css

@@ -0,0 +1,9 @@
+.applyButton {
+  min-width: 100px;
+}
+
+@media screen and (max-width: 767px) {
+  .applyButton {
+    display: none;
+  }
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css

@@ -10,6 +10,15 @@
   background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   padding: var(--Space-x1) var(--Space-x15);
+  border: 2px solid transparent;
+}
+
+.bookingCode:focus-within,
+.bookingCode:has([data-focused="true"]),
+.bookingCode:has([data-pressed="true"]) {
+  background-color: var(--Surface-Primary-Hover);
+  border-radius: var(--Corner-radius-md);
+  border-color: var(--Border-Interactive-Focus);
 }
 
 .bookingCodeLabel {
@@ -20,21 +29,9 @@
   color: var(--Text-Secondary);
 }
 
-.colorSecondary {
-  color: var(--Text-Secondary);
-}
-
-.errorContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
-}
-
-.error {
-  display: flex;
-  gap: var(--Space-x1);
-  white-space: break-spaces;
-  color: var(--UI-Text-Error);
+.input {
+  background-color: var(--Surface-Primary-Hover);
+  color: var(--Text-Interactive-Focus);
 }
 
 .bookingCodeRemember,
@@ -48,29 +45,10 @@
   width: 100%;
 }
 
-.bookingCodeTooltip {
-  max-width: 560px;
-  margin-top: var(--Space-x2);
-  color: var(--Text-Secondary);
-}
-
 .bookingCodeRememberVisible label {
   align-items: center;
 }
 
-.removeButton {
-  width: 100%;
-}
-
-@media screen and (max-width: 767px) {
-  .hideOnMobile {
-    display: none;
-  }
-  .removeButton {
-    display: none;
-  }
-}
-
 @media screen and (min-width: 768px) {
   .bookingCode {
     height: auto;
@@ -82,9 +60,6 @@
     justify-content: space-between;
     border-radius: var(--Space-x15);
   }
-  .error {
-    color: var(--Text-Default);
-  }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
@@ -113,24 +88,25 @@
   }
 }
 
+@media screen and (max-width: 767px) {
+  .bookingCode {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
 @media screen and (min-width: 1367px) {
   .container:hover {
     background-color: var(--Surface-Primary-Hover);
     border-radius: var(--Corner-radius-md);
   }
-  .container:focus-within,
-  .container:has([data-focused="true"]),
-  .container:has([data-pressed="true"]) {
-    background-color: var(--Surface-Primary-Hover);
-    border-radius: var(--Corner-radius-md);
-    border: 2px solid var(--Border-Interactive-Focus);
-  }
+
   .bookingCodeRememberVisible {
     padding: var(--Space-x2);
     position: absolute;
     top: calc(100% + var(--Space-x3));
     left: calc(0% - var(--Space-x05));
-    width: 360px;
+    width: 320px;
     box-shadow: var(--popup-box-shadow);
   }
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx

@@ -1,24 +1,20 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 import { Dialog, DialogTrigger, Popover } from "react-aria-components"
-import { type FieldError, useFormContext } from "react-hook-form"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Modal from "@scandic-hotels/design-system/Modal"
 import Switch from "@scandic-hotels/design-system/Switch"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
-import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingFlowInput from "../../../../BookingFlowInput"
-import { getErrorMessage } from "../../../../BookingFlowInput/errors"
 import { Input as BookingWidgetInput } from "../Input"
-import { RemoveExtraRooms } from "../RemoveExtraRooms/RemoveExtraRooms"
-import { isMultiRoomError } from "../utils"
+import { BookingCodeError } from "./BookingCodeError"
+import CodeRulesModal from "./CodeRulesModal"
+import { RememberCode } from "./RememberCode"
 
 import styles from "./booking-code.module.css"
 
@@ -106,6 +102,21 @@ export default function BookingCode() {
     setShowRemember(true)
   }
 
+  // Only show the Remember Code Popover if there is any text in the Booking Code text field
+  function hideRememberCheck() {
+    setShowRemember(false)
+  }
+  function resetRememberCheck() {
+    setValue("bookingCode.remember", false, { shouldDirty: true })
+    setValue("bookingCode.value", "", { shouldDirty: true })
+    setValue("bookingCode.flag", false, { shouldDirty: true })
+  }
+
+  useEffect(() => {
+    if (bookingCode?.value === "") {
+      setValue("bookingCode.remember", false, { shouldDirty: true })
+    }
+  }, [bookingCode?.value, setValue])
   useEffect(() => {
     setIsTablet(checkIsTablet)
   }, [checkIsTablet])
@@ -142,27 +153,48 @@ export default function BookingCode() {
     <div
       className={styles.container}
       ref={ref}
-      onFocus={showRememberCheck}
       onBlur={(e) => closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)}
     >
       <div className={styles.bookingCode}>
-        <div className={styles.bookingCodeLabel}>
+        <span className={styles.bookingCodeLabel}>
           <Typography variant="Body/Supporting text (caption)/smBold">
-            <span>{codeVoucher}</span>
+            <label htmlFor="booking-code" id="bookingCodeLabel">
+              {codeVoucher}
+            </label>
           </Typography>
           <CodeRulesModal />
-        </div>
-        <BookingWidgetInput
-          className="input"
-          type="search"
-          placeholder={addCode}
-          name="bookingCode.value"
-          id="booking-code"
-          onChange={(event) => updateBookingCodeFormValue(event.target.value)}
-          autoComplete="off"
-          value={bookingCode?.value}
-        />
+        </span>
+        <span className={styles.inputWrapper}>
+          <BookingWidgetInput
+            className={styles.input}
+            type="text"
+            placeholder={addCode}
+            aria-labelledby="bookingCodeLabel"
+            name="bookingCode.value"
+            id="booking-code"
+            onChange={(event) => {
+              updateBookingCodeFormValue(event.target.value)
+              if (!!bookingCode?.value) {
+                showRememberCheck()
+              } else {
+                hideRememberCheck()
+                resetRememberCheck()
+              }
+            }}
+            autoComplete="off"
+            value={bookingCode?.value}
+            onFocus={() => {
+              if (!!bookingCode?.value) {
+                showRememberCheck()
+              }
+            }}
+            onBlur={(e) =>
+              closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)
+            }
+          />
+        </span>
       </div>
+
       {isDesktop ? (
         <div
           className={
@@ -174,7 +206,7 @@ export default function BookingCode() {
           {codeError?.message ? (
             <BookingCodeError codeError={codeError} isDesktop />
           ) : (
-            <CodeRemember
+            <RememberCode
               bookingCodeValue={bookingCode?.value}
               onApplyClick={() => setShowRemember(false)}
             />
@@ -210,106 +242,6 @@ export default function BookingCode() {
   )
 }
 
-type CodeRememberProps = {
-  bookingCodeValue: string | undefined
-  onApplyClick: () => void
-}
-
-function CodeRulesModal() {
-  const intl = useIntl()
-  const codeVoucher = intl.formatMessage({
-    id: "booking.codeVoucher",
-    defaultMessage: "Code / Voucher",
-  })
-  const bookingCodeTooltipText = intl.formatMessage({
-    id: "bookingWidget.bookingCode.tooltip",
-    defaultMessage:
-      "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
-  })
-
-  return (
-    <Modal
-      trigger={
-        <IconButton variant="Muted" size="sm" emphasis iconName="info" />
-      }
-      title={codeVoucher}
-    >
-      <Typography variant="Body/Paragraph/mdRegular">
-        <p className={styles.bookingCodeTooltip}>{bookingCodeTooltipText}</p>
-      </Typography>
-    </Modal>
-  )
-}
-
-function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
-  const intl = useIntl()
-
-  return (
-    <>
-      <Checkbox name="bookingCode.remember">
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>
-            {intl.formatMessage({
-              id: "bookingWidget.bookingCode.remember",
-              defaultMessage: "Remember code",
-            })}
-          </span>
-        </Typography>
-      </Checkbox>
-      {bookingCodeValue ? (
-        <Button
-          size="sm"
-          className={styles.hideOnMobile}
-          variant="Tertiary"
-          type="button"
-          onClick={onApplyClick}
-        >
-          {intl.formatMessage({
-            id: "common.apply",
-            defaultMessage: "Apply",
-          })}
-        </Button>
-      ) : null}
-    </>
-  )
-}
-
-function BookingCodeError({
-  codeError,
-  isDesktop = false,
-}: {
-  codeError: FieldError
-  isDesktop?: boolean
-}) {
-  const intl = useIntl()
-  const isMultiroomError = isMultiRoomError(codeError.message)
-  const config = useBookingFlowConfig()
-
-  return (
-    <div className={styles.errorContainer}>
-      <Typography
-        className={styles.error}
-        variant="Body/Supporting text (caption)/smRegular"
-      >
-        <span>
-          <MaterialIcon
-            size={20}
-            icon="error"
-            color="Icon/Feedback/Error"
-            isFilled={!isDesktop}
-          />
-          {getErrorMessage(intl, config.variant, codeError.message)}
-        </span>
-      </Typography>
-      {isMultiroomError ? (
-        <div className={styles.removeButton}>
-          <RemoveExtraRooms />
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
 function TabletBookingCode({
   bookingCode,
   updateValue,
@@ -340,6 +272,7 @@ function TabletBookingCode({
         document.body.style.overflow = "clip !important"
       }
     }
+
     if (!isOpen && !bookingCode?.value) {
       setValue("bookingCode.flag", false, { shouldDirty: true })
       setIsOpen(isOpen)
@@ -367,8 +300,8 @@ function TabletBookingCode({
               },
             })}
           >
-            <Typography variant="Body/Supporting text (caption)/smBold">
-              <span className={styles.colorSecondary}>{codeVoucher}</span>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <span>{codeVoucher}</span>
             </Typography>
           </Checkbox>
         </Button>
@@ -395,7 +328,7 @@ function TabletBookingCode({
                   {codeError?.message ? (
                     <BookingCodeError codeError={codeError} />
                   ) : (
-                    <CodeRemember
+                    <RememberCode
                       bookingCodeValue={bookingCode?.value}
                       onApplyClick={close}
                     />

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx

@@ -36,6 +36,14 @@ export default function RewardNight() {
   const reward = getRewardMessage(config, intl)
   const rewardNightTooltip = getRewardNightTooltipMessage(config, intl)
 
+  const rewardLabel = intl.formatMessage(
+    {
+      id: "bookingWidget.reward.readMore",
+      defaultMessage: "Read more about booking with {reward}",
+    },
+    { reward: reward }
+  )
+
   const redemptionErr = errors[SEARCH_TYPE_REDEMPTION]
   const isDesktop = useMediaQuery("(min-width: 767px)")
 
@@ -45,6 +53,7 @@ export default function RewardNight() {
     if (value && getValues("bookingCode.value")) {
       setValue("bookingCode.flag", false)
       setValue("bookingCode.value", "", { shouldValidate: true })
+      setValue("bookingCode.remember", false)
       // Hide the notification popup after 5 seconds by re-triggering validation
       // This is kept consistent with location search field error notification timeout
       setTimeout(() => {
@@ -83,37 +92,45 @@ export default function RewardNight() {
 
   return (
     <div ref={ref} onBlur={(e) => closeOnBlur(e.nativeEvent)}>
-      <Checkbox
-        hideError
-        name={SEARCH_TYPE_REDEMPTION}
-        registerOptions={{
-          onChange: (e) => {
-            validateRedemption(e.target.value)
-          },
-        }}
-      >
-        <div className={styles.rewardNightLabel}>
+      <div className={styles.rewardNightLabel}>
+        <Checkbox
+          hideError
+          name={SEARCH_TYPE_REDEMPTION}
+          registerOptions={{
+            onChange: (e) => {
+              validateRedemption(e.target.value)
+            },
+          }}
+        >
           <Typography
             variant="Body/Supporting text (caption)/smRegular"
             className={styles.label}
           >
             <span>{reward}</span>
           </Typography>
-          <Modal
-            trigger={
-              <IconButton variant="Muted" emphasis size="sm" iconName="info" />
-            }
-            title={reward}
+        </Checkbox>
+        <Modal
+          trigger={
+            <IconButton
+              className={styles.infoButton}
+              variant="Muted"
+              emphasis
+              size="sm"
+              iconName="info"
+              aria-label={rewardLabel}
+            />
+          }
+          title={reward}
+        >
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.rewardNightTooltip}
           >
-            <Typography
-              variant="Body/Paragraph/mdRegular"
-              className={styles.rewardNightTooltip}
-            >
-              <span>{rewardNightTooltip}</span>
-            </Typography>
-          </Modal>
-        </div>
-      </Checkbox>
+            <span>{rewardNightTooltip}</span>
+          </Typography>
+        </Modal>
+      </div>
+
       {redemptionErr && (
         <div className={styles.errorContainer}>
           <Typography

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css

@@ -26,6 +26,12 @@
   max-width: 560px;
 }
 
+.infoButton {
+  align-self: center;
+  color: var(
+    --Icon-Interactive-Placeholder
+  ) !important; /* Override IconButton default color */
+}
 @media screen and (max-width: 767px) {
   .hideOnMobile {
     display: none;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx

@@ -310,7 +310,10 @@ function SearchListError({
         <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
         {caption}
       </Caption>
-      <Typography variant="Body/Paragraph/mdRegular">
+      <Typography
+        className={styles.errorBody}
+        variant="Body/Paragraph/mdRegular"
+      >
         <p>{body}</p>
       </Typography>
     </Dialog>

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -36,3 +36,7 @@
 .textPlaceholderColor {
   color: var(--UI-Text-Placeholder);
 }
+
+.errorBody {
+  color: var(--UI-Text-High-contrast);
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css

@@ -19,10 +19,6 @@
   &:has(input:active, input:focus, input:focus-within) {
     background-color: var(--Surface-Primary-Hover);
   }
-
-  &:has(input:active, input:focus, input:focus-within) {
-    border: 2px solid var(--Border-Interactive-Focus);
-  }
 }
 
 .label {

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx

@@ -1,7 +1,7 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./validationError.module.css"
 
@@ -10,20 +10,34 @@ export default function ValidationError() {
 
   return (
     <div className={styles.container}>
-      <Caption className={styles.title} color="red" type="bold">
-        <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={20} />
-        {intl.formatMessage({
-          id: "bookingWidget.validationError.destination",
-          defaultMessage: "Enter destination or hotel",
-        })}
-      </Caption>
-      <Caption className={styles.message} type="regular">
-        {intl.formatMessage({
-          id: "bookingWidget.validationError.destinationDesc",
-          defaultMessage:
-            "A destination or hotel name is needed to be able to search for a hotel room.",
-        })}
-      </Caption>
+      <Typography
+        className={styles.title}
+        variant="Body/Supporting text (caption)/smBold"
+      >
+        <span>
+          <MaterialIcon
+            icon="error_circle_rounded"
+            color="Icon/Feedback/Error"
+            size={20}
+          />
+          {intl.formatMessage({
+            id: "bookingWidget.validationError.destination",
+            defaultMessage: "Enter destination or hotel",
+          })}
+        </span>
+      </Typography>
+      <Typography
+        className={styles.message}
+        variant="Body/Supporting text (caption)/smRegular"
+      >
+        <span>
+          {intl.formatMessage({
+            id: "bookingWidget.validationError.destinationDesc",
+            defaultMessage:
+              "A destination or hotel name is needed to be able to search for a hotel room.",
+          })}
+        </span>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/validationError.module.css

@@ -20,9 +20,11 @@
   display: flex;
   align-items: center;
   gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
 }
 
 .message {
+  color: var(--UI-Text-High-contrast);
   text-wrap: auto;
 }
 

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css

@@ -12,11 +12,14 @@
 .rooms,
 .when {
   position: relative;
+  border: 2px solid transparent;
 }
 
 .buttonContainer {
+  align-self: center;
   display: grid;
   gap: var(--Space-x1);
+  border: 2px solid transparent;
 }
 
 .showOnTablet {
@@ -30,15 +33,41 @@
 .label {
   color: var(--Text-Accent-Primary);
 }
-.when:has([data-datepicker-open="true"]) .label,
-.rooms:has([data-pressed="true"]) .label {
+.when:has([data-datepicker-open="true"], [data-pressed="true"]) .label,
+.rooms:has([data-rooms-open="true"], [data-pressed="true"]) .label {
   color: var(--Text-Interactive-Focus);
 }
 
+.when:hover,
+.rooms:hover {
+  background-color: var(--Surface-Primary-Hover);
+}
+.where:has(
+  [data-focus-visible="true"],
+  [data-focused="true"],
+  [data-pressed="true"]
+),
+.when:has(
+  [data-datepicker-open="true"],
+  [data-focus-visible="true"],
+  [data-pressed="true"]
+),
+.rooms:has(
+  [data-focus-visible="true"],
+  [data-rooms-open="true"],
+  [data-pressed="true"]
+) {
+  background-color: var(--Surface-Primary-Hover);
+  border-color: var(--Border-Interactive-Focus);
+  color: var(--Text-Interactive-Focus);
+}
 @media screen and (max-width: 767px) {
   .voucherContainer {
     padding: var(--Space-x2) 0 var(--Space-x4);
   }
+  .buttonContainer {
+    width: 100%;
+  }
 }
 
 @media screen and (max-width: 1366px) {
@@ -83,16 +112,16 @@
     display: flex;
     flex: 2;
     gap: var(--Space-x2);
-    margin-left: calc(-1 * var(--Space-x15));
   }
   .voucherContainer {
-    flex: 1;
+    border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
   }
 
   .rooms,
   .when,
   .where {
     width: 100%;
+    border-radius: var(--Corner-radius-md);
   }
 
   .inputContainer input[type="text"] {
@@ -103,18 +132,6 @@
   .rooms,
   .when {
     padding: var(--Space-x1) var(--Space-x15);
-    border-radius: var(--Corner-radius-md);
-  }
-
-  .when:hover,
-  .rooms:hover {
-    background-color: var(--Surface-Primary-Hover);
-  }
-  .when:has([data-datepicker-open="true"]),
-  .rooms:has([data-focus-visible="true"], [data-pressed="true"]) {
-    background-color: var(--Surface-Primary-Hover);
-    border: 2px solid var(--Border-Interactive-Focus);
-    color: var(--Text-Interactive-Focus);
   }
 
   .where {
@@ -137,13 +154,18 @@
   .input {
     flex-wrap: wrap;
   }
+  .inputRow {
+    display: flex;
+    flex-direction: row;
+    gap: var(--Space-x2);
+    width: 100%;
+    padding: var(--Space-x2);
+  }
+
   .inputContainer {
-    padding: var(--Space-x2) var(--Space-x2) var(--Space-x2)
-      var(--Layout-Tablet-Margin-Margin-min);
     flex-basis: 80%;
   }
   .buttonContainer {
-    padding-right: var(--Layout-Tablet-Margin-Margin-min);
     margin: 0;
   }
   .input .buttonContainer .button {
@@ -153,12 +175,11 @@
   }
 
   .voucherRow {
+    flex: 1;
     display: flex;
-    background: var(--Base-Surface-Primary-light-Hover);
+    background-color: var(--Base-Surface-Primary-light-Hover);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-    padding: var(--Space-x2) var(--Layout-Tablet-Margin-Margin-min);
-    border-radius: 0 0 var(--Corner-radius-lg) var(--Corner-radius-lg);
-    margin-left: calc(var(--Space-x15) * -1);
+    padding-left: var(--Space-x2);
   }
 
   .showOnTablet {
@@ -173,6 +194,9 @@
   .input {
     gap: var(--Space-x2);
   }
+  .inputRow {
+    flex: 1;
+  }
 
   .bookingCodeDisabled {
     flex: none;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -62,64 +62,66 @@ export default function FormContent({
 
   return (
     <div className={styles.input}>
-      <div className={styles.inputContainer}>
-        <div className={styles.where}>
-          <Search
-            handlePressEnter={onSubmit}
-            selectOnBlur={true}
-            inputName="search"
-            includeTypes={["cities", "hotels"]}
-            autoFocus={focusWidget}
+      <div className={styles.inputRow}>
+        <div className={styles.inputContainer}>
+          <div className={styles.where}>
+            <Search
+              handlePressEnter={onSubmit}
+              selectOnBlur={true}
+              inputName="search"
+              includeTypes={["cities", "hotels"]}
+              autoFocus={focusWidget}
+            />
+            {errors.search && <ValidationError />}
+          </div>
+          <div className={styles.when}>
+            <Typography
+              variant="Body/Supporting text (caption)/smBold"
+              className={styles.label}
+            >
+              <label id="bookingWidgetDatePickerLabel">
+                {nights > 0
+                  ? intl.formatMessage(
+                      {
+                        id: "booking.numberOfNights",
+                        defaultMessage:
+                          "{totalNights, plural, one {# night} other {# nights}}",
+                      },
+                      { totalNights: nights }
+                    )
+                  : intl.formatMessage({
+                      id: "bookingWidget.label.checkIn",
+                      defaultMessage: "Check in",
+                    })}
+              </label>
+            </Typography>
+            <DatePicker ariaLabelledBy="bookingWidgetDatePickerLabel" />
+          </div>
+          <div className={styles.rooms}>
+            <Typography
+              variant="Body/Supporting text (caption)/smBold"
+              className={styles.label}
+            >
+              <label id="rooms-and-guests">
+                {intl.formatMessage({
+                  id: "bookingWidget.label.roomsAndGuests",
+                  defaultMessage: "Rooms & Guests",
+                })}
+              </label>
+            </Typography>
+            <GuestsRoomsPickerForm ariaLabelledBy="rooms-and-guests" />
+          </div>
+        </div>
+        <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
+          <IconButton
+            size="xl"
+            variant="Filled"
+            form={formId}
+            type="submit"
+            isDisabled={isSearching}
+            iconName="search"
           />
-          {errors.search && <ValidationError />}
         </div>
-        <div className={styles.when}>
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.label}
-          >
-            <label htmlFor="date">
-              {nights > 0
-                ? intl.formatMessage(
-                    {
-                      id: "booking.numberOfNights",
-                      defaultMessage:
-                        "{totalNights, plural, one {# night} other {# nights}}",
-                    },
-                    { totalNights: nights }
-                  )
-                : intl.formatMessage({
-                    id: "bookingWidget.label.checkIn",
-                    defaultMessage: "Check in",
-                  })}
-            </label>
-          </Typography>
-          <DatePicker name="date" />
-        </div>
-        <div className={styles.rooms}>
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.label}
-          >
-            <label id="rooms-and-guests">
-              {intl.formatMessage({
-                id: "bookingWidget.label.roomsAndGuests",
-                defaultMessage: "Rooms & Guests",
-              })}
-            </label>
-          </Typography>
-          <GuestsRoomsPickerForm ariaLabelledBy="rooms-and-guests" />
-        </div>
-      </div>
-      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <IconButton
-          size="xl"
-          variant="Filled"
-          form={formId}
-          type="submit"
-          isDisabled={isSearching}
-          iconName="search"
-        />
       </div>
       <div
         className={cx(

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css

@@ -28,8 +28,7 @@
 
 @media screen and (min-width: 1367px) {
   .default {
-    padding: var(--Space-x15) var(--Space-x2) var(--Space-x15)
-      var(--Space-x1);
+    padding: var(--Space-x15) var(--Space-x2) var(--Space-x15) var(--Space-x1);
   }
 
   .full {
@@ -43,8 +42,7 @@
   }
 
   .compact {
-    padding: var(--Space-x15) var(--Space-x2) var(--Space-x15)
-      var(--Space-x1);
+    padding: var(--Space-x15) var(--Space-x2) var(--Space-x15) var(--Space-x15);
     white-space: nowrap;
   }
 }

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -112,20 +111,11 @@ export default function DatePickerRangeDesktop({
                 color="Border/Divider/Subtle"
               />
               <footer className={props.className}>
-                <Button
-                  intent="tertiary"
-                  onPress={close}
-                  size="small"
-                  theme="base"
-                >
-                  <Caption color="white" type="bold" asChild>
-                    <span>
-                      {intl.formatMessage({
-                        id: "datePicker.selectDates",
-                        defaultMessage: "Select dates",
-                      })}
-                    </span>
-                  </Caption>
+                <Button variant="Tertiary" onPress={close} size="sm">
+                  {intl.formatMessage({
+                    id: "datePicker.selectDates",
+                    defaultMessage: "Select dates",
+                  })}
                 </Button>
               </footer>
             </>

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -131,19 +131,15 @@ export default function DatePickerRangeMobile({
       <footer className={styles.footer}>
         <Button
           className={styles.button}
-          intent="tertiary"
+          variant="Primary"
+          color="Primary"
+          size="md"
           onPress={close}
-          size="large"
-          theme="base"
         >
-          <Typography variant="Body/Paragraph/mdBold">
-            <span>
-              {intl.formatMessage({
-                id: "datePicker.selectDates",
-                defaultMessage: "Select dates",
-              })}
-            </span>
-          </Typography>
+          {intl.formatMessage({
+            id: "datePicker.selectDates",
+            defaultMessage: "Select dates",
+          })}
         </Button>
       </footer>
     </div>

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css

@@ -14,6 +14,7 @@ div.months {
 
 .captionLabel {
   text-transform: capitalize;
+  color: var(--Text-Default);
 }
 
 td.day,

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css

@@ -24,7 +24,7 @@
   align-self: flex-end;
   background-color: var(--Main-Grey-White);
   grid-area: header;
-  padding: var(--Space-x3) var(--Space-x2);
+  padding: 0 var(--Space-x2) 0;
   position: sticky;
   top: 0;
   z-index: 10;

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);
   }
 }

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

@@ -1,10 +1,14 @@
 "use client"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { FocusScope, useOverlay } from "react-aria"
+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"
 
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../hooks/useLang"
@@ -16,17 +20,24 @@ import styles from "./date-picker.module.css"
 import type { DateRange } from "react-day-picker"
 
 type DatePickerFormProps = {
+  ariaLabelledBy?: string
   name?: string
 }
-export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
+export default function DatePickerForm({
+  ariaLabelledBy,
+  name = "date",
+}: DatePickerFormProps) {
   const lang = useLang()
-  const intl = useIntl()
 
+  const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
+  const [isDesktop, setIsDesktop] = useState(true)
+  const { lockScroll, unlockScroll } = useScrollLock({
+    autoLock: false,
+  })
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
-  const { register, setValue } = useFormContext()
+  const { setValue } = useFormContext()
   const ref = useRef<HTMLDivElement | null>(null)
-
   const close = useCallback(() => {
     if (!selectedDate.toDate) {
       setValue(
@@ -38,13 +49,21 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         { shouldDirty: true }
       )
     }
-
     setIsOpen(false)
-  }, [name, setValue, selectedDate])
+    unlockScroll()
+  }, [name, setValue, selectedDate, unlockScroll])
 
-  function showOnFocus() {
-    setIsOpen(true)
-  }
+  const { overlayProps, underlayProps } = useOverlay(
+    {
+      isOpen,
+      onClose: () => {
+        setIsOpen(false)
+        unlockScroll()
+      },
+      isDismissable: true,
+    },
+    ref
+  )
 
   function handleSelectDate(
     _nextRange: DateRange | undefined,
@@ -98,34 +117,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     }
   }
 
-  const closeIfOutside = useCallback(
-    (target: HTMLElement) => {
-      if (ref.current && target && !ref.current.contains(target)) {
-        close()
-      }
-    },
-    [close, ref]
-  )
-
-  function closeOnBlur(evt: FocusEvent) {
-    if (isOpen) {
-      const target = evt.relatedTarget as HTMLElement
-      closeIfOutside(target)
-    }
-  }
-
   useEffect(() => {
-    function handleClickOutside(evt: Event) {
-      if (isOpen) {
-        const target = evt.target as HTMLElement
-        closeIfOutside(target)
-      }
-    }
-    document.body.addEventListener("click", handleClickOutside)
-    return () => {
-      document.body.removeEventListener("click", handleClickOutside)
-    }
-  }, [closeIfOutside, isOpen])
+    setIsDesktop(checkIsDesktop)
+  }, [checkIsDesktop])
 
   const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)
@@ -134,64 +128,122 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     ? dt(selectedDate.toDate).locale(lang).format(longDateFormat[lang])
     : ""
 
-  return (
-    <div
-      className={styles.container}
-      onBlur={(e) => {
-        closeOnBlur(e.nativeEvent)
-      }}
-      data-datepicker-open={isOpen}
-      ref={ref}
-    >
-      <button
-        className={styles.btn}
-        onFocus={showOnFocus}
-        onClick={() => setIsOpen(true)}
-        type="button"
-      >
-        <Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
-          <span>
-            {intl.formatMessage(
-              {
-                id: "booking.selectedDateRange",
-                defaultMessage: "{selectedFromDate} – {selectedToDate}",
-              },
-              {
-                selectedFromDate,
-                selectedToDate,
-              }
-            )}
-          </span>
-        </Typography>
-      </button>
-      <input {...register("date.fromDate")} type="hidden" />
-      <input {...register("date.toDate")} type="hidden" />
-      <div aria-modal className={styles.hideWrapper} role="dialog">
-        <DatePickerRangeDesktop
-          close={close}
-          handleOnSelect={handleSelectDate}
-          // DayPicker lib needs Daterange in form as below to show appropriate UI
-          selectedRange={{
-            from: dt(selectedDate.fromDate).toDate(),
-            to: selectedDate.toDate
-              ? dt(selectedDate.toDate).toDate()
-              : undefined,
-          }}
-        />
-        {isOpen && (
-          <DatePickerRangeMobile
-            close={close}
-            handleOnSelect={handleSelectDate}
-            // DayPicker lib needs Daterange in form as below to show appropriate UI
-            selectedRange={{
-              from: dt(selectedDate.fromDate).toDate(),
-              to: selectedDate.toDate
-                ? dt(selectedDate.toDate).toDate()
-                : undefined,
-            }}
-          />
-        )}
-      </div>
+  return isDesktop ? (
+    <div className={styles.datePicker}>
+      <Trigger
+        ariaLabelledBy={ariaLabelledBy}
+        onPress={() => {
+          setIsOpen((prev) => !prev)
+        }}
+        selectedFromDate={selectedFromDate}
+        selectedToDate={selectedToDate}
+      />
+      {isOpen && (
+        <div {...underlayProps}>
+          <FocusScope contain restoreFocus autoFocus>
+            <div
+              {...overlayProps}
+              ref={ref}
+              className={styles.pickerContainer}
+              data-datepicker-open={isOpen}
+            >
+              <DatePickerRangeDesktop
+                close={close}
+                handleOnSelect={handleSelectDate}
+                // DayPicker lib needs Daterange in form as below to show appropriate UI
+                selectedRange={{
+                  from: dt(selectedDate.fromDate).toDate(),
+                  to: selectedDate.toDate
+                    ? dt(selectedDate.toDate).toDate()
+                    : undefined,
+                }}
+              />
+            </div>
+          </FocusScope>
+        </div>
+      )}
+    </div>
+  ) : (
+    <div className={styles.datePicker}>
+      <Trigger
+        ariaLabelledBy={ariaLabelledBy}
+        onPress={() => {
+          setIsOpen((prev) => !prev)
+          if (!isOpen) {
+            lockScroll()
+          } else {
+            unlockScroll()
+          }
+        }}
+        selectedFromDate={selectedFromDate}
+        selectedToDate={selectedToDate}
+      />
+      {isOpen && (
+        <div {...underlayProps}>
+          <FocusScope contain restoreFocus autoFocus>
+            <div
+              {...overlayProps}
+              ref={ref}
+              className={styles.pickerContainer}
+              data-datepicker-open={isOpen}
+            >
+              <DatePickerRangeMobile
+                close={close}
+                handleOnSelect={handleSelectDate}
+                // DayPicker lib needs Daterange in form as below to show appropriate UI
+                selectedRange={{
+                  from: dt(selectedDate.fromDate).toDate(),
+                  to: selectedDate.toDate
+                    ? dt(selectedDate.toDate).toDate()
+                    : undefined,
+                }}
+              />
+            </div>
+          </FocusScope>
+        </div>
+      )}
     </div>
   )
 }
+
+function Trigger({
+  onPress,
+  selectedFromDate,
+  selectedToDate,
+  ariaLabelledBy,
+}: {
+  onPress?: () => void
+  selectedFromDate: string
+  selectedToDate: string
+  ariaLabelledBy?: string
+}) {
+  const intl = useIntl()
+  const { register } = useFormContext()
+
+  const triggerText = intl.formatMessage(
+    {
+      id: "booking.selectedDateRange",
+      defaultMessage: "{selectedFromDate} – {selectedToDate}",
+    },
+    {
+      selectedFromDate,
+      selectedToDate,
+    }
+  )
+  return (
+    <>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <ButtonRAC
+          className={styles.triggerButton}
+          onPress={onPress}
+          type="button"
+          aria-labelledby={ariaLabelledBy}
+        >
+          {triggerText}
+        </ButtonRAC>
+      </Typography>
+      <input {...register("date.fromDate")} type="hidden" />
+      <input {...register("date.toDate")} type="hidden" />
+    </>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -1,11 +1,12 @@
 "use client"
 
+import { useEffect, useRef, useState } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
-import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Select } from "@scandic-hotels/design-system/Select"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import styles from "./child-selector.module.css"
@@ -38,6 +39,34 @@ export default function ChildInfoSelector({
   index = 0,
   roomIndex = 0,
 }: ChildInfoSelectorProps) {
+  const ageSelectRef = useRef<HTMLDivElement>(null)
+  const bedPrefSelectRef = useRef<HTMLDivElement>(null)
+  const [ageWidth, setAgeWidth] = useState<number | undefined>(undefined)
+  const [bedWidth, setBedWidth] = useState<number | undefined>(undefined)
+
+  //Match width of the dropdown with width of parent select
+  useEffect(() => {
+    if (!ageSelectRef.current) return
+
+    const observer = new ResizeObserver(() => {
+      setAgeWidth(ageSelectRef.current!.offsetWidth)
+    })
+
+    observer.observe(ageSelectRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!bedPrefSelectRef.current) return
+
+    const observer = new ResizeObserver(() => {
+      setBedWidth(bedPrefSelectRef.current!.offsetWidth)
+    })
+
+    observer.observe(bedPrefSelectRef.current)
+    return () => observer.disconnect()
+  }, [])
+
   const ageFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.age`
   const bedFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.bed`
   const intl = useIntl()
@@ -49,10 +78,12 @@ export default function ChildInfoSelector({
     id: "booking.bedPreference",
     defaultMessage: "Bed preference",
   })
+
   const errorMessage = intl.formatMessage({
     id: "bookingWidget.child.ageRequiredError",
     defaultMessage: "Child age is required",
   })
+
   const { setValue, formState } = useFormContext()
 
   function updateSelectedBed(bed: number) {
@@ -113,50 +144,62 @@ export default function ChildInfoSelector({
   return (
     <>
       <div key={index} className={styles.childInfoContainer}>
-        <div>
-          <DeprecatedSelect
-            required={true}
+        <div ref={ageSelectRef}>
+          <Select
+            isRequired
             items={ageList}
+            name={ageFieldName}
             label={ageLabel}
-            aria-label={ageLabel}
-            value={child.age ?? childDefaultValues.age}
-            onSelect={(key) => {
+            onSelectionChange={(key) => {
               updateSelectedAge(key as number)
             }}
-            maxHeight={180}
-            name={ageFieldName}
-            isNestedInModal={true}
+            popoverWidth={`${ageWidth}px`}
+            value={child.age ?? childDefaultValues.age}
+            isInvalid={!!ageError}
           />
         </div>
-        <div>
+        <div ref={bedPrefSelectRef}>
           {child.age >= 0 ? (
-            <DeprecatedSelect
+            <Select
+              isRequired
               items={getAvailableBeds(child.age)}
+              name={bedFieldName}
               label={bedLabel}
               aria-label={bedLabel}
               value={child.bed ?? childDefaultValues.bed}
-              onSelect={(key) => {
+              onSelectionChange={(key) => {
                 updateSelectedBed(key as number)
               }}
-              name={bedFieldName}
-              isNestedInModal={true}
+              popoverWidth={`${bedWidth}px`}
             />
           ) : null}
         </div>
       </div>
 
       {roomErrors && roomErrors.message ? (
-        <Caption color="red" className={styles.error}>
-          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-          {roomErrors.message}
-        </Caption>
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.error}
+        >
+          <span>
+            <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+            {roomErrors.message}
+          </span>
+        </Typography>
       ) : null}
 
       {ageError || bedError ? (
-        <Caption color="red" className={styles.error}>
-          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-          {errorMessage}
-        </Caption>
+        <>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.error}
+          >
+            <span>
+              <MaterialIcon icon="error" color="Icon/Feedback/Error" />
+              {errorMessage}
+            </span>
+          </Typography>
+        </>
       ) : null}
     </>
   )

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -15,6 +15,7 @@
 }
 
 .error {
+  color: var(--Text-Interactive-Error);
   display: flex;
   align-items: center;
   gap: var(--Space-x1);

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

@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
+import { useIsDesktop } from "../../../hooks/useBreakpoint"
 import { GuestsRoom } from "./GuestsRoom"
 
 import styles from "./guests-rooms-picker.module.css"
@@ -30,6 +30,7 @@ export default function GuestsRoomsPickerDialog({
   onClose,
 }: GuestsRoomsPickerDialogProps) {
   const intl = useIntl()
+  const isDesktop = useIsDesktop()
   const config = useBookingFlowConfig()
   const { getFieldState, trigger, setValue, getValues } =
     useFormContext<BookingWidgetSchema>()
@@ -61,6 +62,11 @@ export default function GuestsRoomsPickerDialog({
         defaultMessage:
           "Multi-room booking is not available with this booking code.",
       })
+  const isInvalid =
+    getFieldState("rooms").invalid ||
+    roomsValue.some((room) =>
+      room.childrenInRoom.some((child) => child.age === undefined)
+    )
 
   const handleClose = useCallback(async () => {
     const isValid = await trigger("rooms")
@@ -97,13 +103,11 @@ export default function GuestsRoomsPickerDialog({
     if (fieldState.invalid) trigger("rooms")
   }, [roomsValue, getFieldState, trigger])
 
-  const isInvalid =
-    getFieldState("rooms").invalid ||
-    roomsValue.some((room) =>
-      room.childrenInRoom.some((child) => child.age === undefined)
-    )
   const canAddRooms = rooms.length < MAX_ROOMS
 
+  const addRoomButtonDisabled =
+    !!addRoomDisabledTextForSpecialRate || !canAddRooms
+
   return (
     <>
       <section className={styles.contentWrapper}>
@@ -122,114 +126,89 @@ export default function GuestsRoomsPickerDialog({
               onRemove={handleRemoveRoom}
             />
           ))}
-
-          {addRoomDisabledTextForSpecialRate ? (
-            <div className={styles.addRoomMobileContainer}>
-              <Button
-                variant="Text"
-                color="Primary"
-                wrapping
-                onPress={handleAddRoom}
-                isDisabled
-                size="sm"
-              >
-                <MaterialIcon icon="add" color="CurrentColor" />
-                {addRoomLabel}
-              </Button>
-              <div className={styles.errorContainer}>
-                <Typography
-                  className={styles.error}
-                  variant="Body/Supporting text (caption)/smRegular"
-                >
-                  <span>
-                    <MaterialIcon
-                      icon="error"
-                      size={20}
-                      color="Icon/Feedback/Error"
-                      isFilled
-                    />
-                    {addRoomDisabledTextForSpecialRate}
-                  </span>
-                </Typography>
-              </div>
-            </div>
-          ) : (
-            canAddRooms && (
-              <div className={styles.addRoomMobileContainer}>
+          {!isDesktop && (
+            <>
+              <div className={styles.addRoomBtnContainer}>
                 <Button
                   className={styles.addRoomBtn}
                   variant="Text"
                   wrapping
                   color="Primary"
                   onPress={handleAddRoom}
+                  isDisabled={addRoomButtonDisabled}
                   size="sm"
                 >
                   <MaterialIcon icon="add" color="CurrentColor" />
                   {addRoomLabel}
                 </Button>
               </div>
-            )
+
+              {addRoomDisabledTextForSpecialRate && (
+                <div className={styles.errorContainer}>
+                  <Typography
+                    className={styles.error}
+                    variant="Body/Supporting text (caption)/smRegular"
+                  >
+                    <span>
+                      <MaterialIcon
+                        icon="error"
+                        size={20}
+                        color="Icon/Feedback/Error"
+                        isFilled
+                      />
+                      {addRoomDisabledTextForSpecialRate}
+                    </span>
+                  </Typography>
+                </div>
+              )}
+            </>
           )}
         </div>
       </section>
       <footer className={styles.footer}>
-        {addRoomDisabledTextForSpecialRate ? (
-          <div className={styles.hideOnMobile}>
-            <Tooltip
-              text={addRoomDisabledTextForSpecialRate}
-              position="bottom"
-              arrow="left"
+        <div className={styles.footerButtons}>
+          {isDesktop && (
+            <Button
+              variant="Text"
+              wrapping
+              color="Primary"
+              isDisabled={addRoomButtonDisabled}
+              size="sm"
+              onPress={handleAddRoom}
             >
-              <Button
-                variant="Text"
-                wrapping
-                color="Primary"
-                isDisabled
-                size="sm"
-                onPress={handleAddRoom}
-              >
-                <MaterialIcon icon="add_circle" color="CurrentColor" />
-                {addRoomLabel}
-              </Button>
-            </Tooltip>
-          </div>
-        ) : (
-          canAddRooms && (
-            <div className={styles.hideOnMobile}>
-              <Button
-                className={styles.addRoomBtn}
-                variant="Text"
-                wrapping
-                color="Primary"
-                size="sm"
-                onPress={handleAddRoom}
-              >
-                <MaterialIcon icon="add_circle" color="CurrentColor" />
-                {addRoomLabel}
-              </Button>
+              <MaterialIcon icon="add_circle" color="CurrentColor" />
+              {addRoomLabel}
+            </Button>
+          )}
+          <Button
+            onPress={handleClose}
+            isDisabled={isInvalid}
+            className={styles.doneButton}
+            variant={isDesktop ? "Tertiary" : "Primary"}
+            color="Primary"
+            size={isDesktop ? "sm" : "md"}
+          >
+            {doneLabel}
+          </Button>
+        </div>
+
+        {/* DESKTOP INLINE ERROR MESSAGE */}
+        {addRoomDisabledTextForSpecialRate && isDesktop && (
+          <Typography
+            className={styles.error}
+            variant="Body/Supporting text (caption)/smRegular"
+          >
+            <div className={styles.errorContainer}>
+              <MaterialIcon
+                icon="error"
+                size={20}
+                color="Icon/Feedback/Error"
+                isFilled
+              />
+              {addRoomDisabledTextForSpecialRate}
             </div>
-          )
+          </Typography>
         )}
-        <Button
-          onPress={handleClose}
-          isDisabled={isInvalid}
-          className={styles.hideOnDesktop}
-          variant="Tertiary"
-          color="Primary"
-          size="sm"
-        >
-          {doneLabel}
-        </Button>
-        <Button
-          onPress={handleClose}
-          isDisabled={isInvalid}
-          className={styles.hideOnMobile}
-          variant="Tertiary"
-          color="Primary"
-          size="sm"
-        >
-          {doneLabel}
-        </Button>
       </footer>
     </>
   )

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

@@ -0,0 +1,33 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./validationError.module.css"
+
+export default function ValidationError() {
+  const intl = useIntl()
+
+  const errorMessage = intl.formatMessage({
+    id: "bookingWidget.child.ageRequiredError",
+    defaultMessage: "Child age is required",
+  })
+
+  return (
+    <div className={styles.container}>
+      <Typography
+        className={styles.title}
+        variant="Body/Supporting text (caption)/smBold"
+      >
+        <span>
+          <MaterialIcon
+            icon="error_circle_rounded"
+            color="Icon/Feedback/Error"
+            size={20}
+          />
+          {errorMessage}
+        </span>
+      </Typography>
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css

@@ -0,0 +1,38 @@
+.container {
+  position: absolute;
+  top: calc(100% + var(--Space-x2));
+  background: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-lg);
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  padding: var(--Space-x15);
+  max-width: min(100vw, calc(360px - var(--Space-x2)));
+  width: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--Space-x15);
+  align-items: flex-start;
+  gap: var(--Space-x05);
+  z-index: var(--dialog-z-index);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
+}
+
+.message {
+  text-wrap: auto;
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    top: calc(100% + var(--Space-x1) + var(--Space-x2));
+    left: calc(var(--Space-x1) * -1);
+    padding: var(--Space-x2);
+    max-width: 360px;
+    width: fit-content;
+  }
+}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -1,30 +1,17 @@
-.triggerDesktop {
-  display: none;
-}
-
 .errorContainer {
   display: flex;
-  padding: var(--Space-x2);
+  padding: var(--Space-x15);
+  border: 1px solid var(--Border-Default);
+  border-radius: var(--Corner-radius-md);
+  justify-content: center;
 }
 
 .error {
   display: flex;
   gap: var(--Space-x1);
-  color: var(--UI-Text-Error);
-}
-
-.pickerContainerMobile {
-  --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;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
-  transition: top 300ms ease;
-  z-index: 100;
+  color: var(--Text-Feedback-Error);
+  text-wrap: wrap;
+  align-items: center;
 }
 
 .contentWrapper {
@@ -35,10 +22,6 @@
   grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
 }
 
-.pickerContainerDesktop {
-  display: none;
-}
-
 .roomContainer {
   display: grid;
   gap: var(--Space-x2);
@@ -69,6 +52,7 @@
   bottom: 0;
   right: 0;
   padding: 20px var(--Space-x15) 0;
+  border-radius: var(--Corner-radius-lg);
 }
 
 .guestsAndRooms {
@@ -77,10 +61,18 @@
 
 .footer {
   display: flex;
-  flex-direction: row;
-  gap: var(--Space-x1);
+  flex-direction: column;
+  gap: var(--Space-x2);
 }
 
+.addRoomBtnContainer {
+  display: flex;
+  justify-content: center;
+}
+.footerButtons {
+  display: flex;
+  justify-content: space-between;
+}
 .roomContainer {
   padding: var(--Space-x2);
 }
@@ -97,15 +89,27 @@
   width: 100%;
 }
 
-.contentWrapper
-  .addRoomMobileContainer
-  .addRoomBtn:is(:focus, :focus-visible, :focus-within),
-.footer .hideOnMobile .addRoomBtn:is(:focus, :focus-visible, :focus-within),
+.contentWrapper .addRoomBtn:is(:focus, :focus-visible, :focus-within),
+.footer .addRoomBtn:is(:focus, :focus-visible, :focus-within),
 .roomActionsButton:is(:focus, :focus-visible, :focus-within) {
-  outline: var(--Border-Interactive-Focus) auto 1px;
   text-decoration: none;
 }
 
+.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;
+  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: top 300ms ease;
+  z-index: var(--booking-widget-z-index);
+  overflow: scroll;
+}
+
 @media screen and (max-width: 1366px) {
   .contentContainer {
     grid-area: content;
@@ -140,43 +144,52 @@
     width: 100%;
   }
 
-  .footer .hideOnMobile {
-    display: none;
-  }
-
   .addRoomMobileContainer {
     display: grid;
-    padding-bottom: calc(var(--sticky-button-height) + 20px);
+    padding-bottom: var(--Space-x3);
+  }
+  .errorContainer {
+    margin: var(--Space-x2);
   }
-
   .addRoomMobileContainer button {
     width: 150px;
     margin: 0 auto;
   }
-
-  .addRoomMobileContainer .addRoomMobileDisabledText {
-    padding: var(--Space-x1) var(--Space-x2);
-    background-color: var(--Background-Primary);
-    margin: 0 var(--Space-x2);
-    border-radius: var(--Corner-radius-md);
-    display: flex;
-    gap: var(--Space-x1);
-  }
 }
 
 @media screen and (min-width: 1367px) {
   .container {
     height: 24px;
   }
-
-  .pickerContainerMobile {
-    display: none;
-  }
-
   .contentWrapper {
     grid-template-rows: auto;
   }
 
+  .footerButtons {
+    max-height: 40px;
+  }
+
+  .doneButton {
+    min-width: 125px;
+  }
+
+  .pickerContainer {
+    position: absolute;
+    display: grid;
+    bottom: auto;
+    left: auto;
+    right: auto;
+    border-radius: var(--Corner-radius-lg);
+    box-shadow: var(--popup-box-shadow);
+    min-width: 360px;
+    max-width: calc(100vw - 20px);
+    padding: var(--Space-x2) var(--Space-x3);
+    top: calc(100% + 36px);
+    max-height: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
   .roomContainer {
     padding: var(--Space-x2) 0 0 0;
   }
@@ -193,34 +206,13 @@
     overflow-y: visible;
   }
 
-  .triggerMobile {
-    display: none;
-  }
-
-  .triggerDesktop {
-    display: block;
-  }
-
-  .triggerDesktop > span {
+  .trigger > span {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .pickerContainerDesktop {
-    --header-height: 72px;
-    --sticky-button-height: 140px;
-
-    background-color: var(--Main-Grey-White);
-    display: grid;
-    border-radius: var(--Corner-radius-lg);
-    box-shadow: var(--popup-box-shadow);
-    max-width: calc(100vw - 20px);
-    padding: var(--Space-x2) var(--Space-x3);
-    width: 360px;
-  }
-
-  .pickerContainerDesktop:focus-visible {
+  .pickerContainer:focus-visible {
     outline: none;
   }
 
@@ -229,18 +221,13 @@
   }
 
   .footer {
-    grid-template-columns: auto auto;
+    display: flex;
+    justify-content: space-between;
     padding-top: var(--Space-x2);
+    height: fit-content;
   }
 
   .footer button {
-    margin-left: auto;
     width: auto;
-    min-width: 125px;
-  }
-
-  .footer .hideOnDesktop,
-  .addRoomMobileContainer {
-    display: none;
   }
 }

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

@@ -1,19 +1,16 @@
 "use client"
 
-import { useCallback, useEffect, useId, useState } from "react"
-import {
-  Button,
-  Dialog,
-  DialogTrigger,
-  Modal,
-  Popover,
-} from "react-aria-components"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { FocusScope, useOverlay } from "react-aria"
+import { Button } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ValidationError from "./ValidationError/index"
 import PickerForm from "./Form"
 
 import styles from "./guests-rooms-picker.module.css"
@@ -26,107 +23,175 @@ export default function GuestsRoomsPickerForm({
 }: {
   ariaLabelledBy?: string
 }) {
-  const { trigger } = useFormContext<BookingWidgetSchema>()
   const rooms = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
 
-  const popoverId = useId()
   const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
   const [isDesktop, setIsDesktop] = useState(true)
   const [isOpen, setIsOpen] = useState(false)
-  const [containerHeight, setContainerHeight] = useState(0)
-  const childCount = rooms[0]?.childrenInRoom.length ?? 0 // ToDo Update for multiroom later
+  const [containerConstraint, setContainerConstraint] = useState(0)
+  const [showErrorModal, setShowErrorModal] = useState(false)
 
-  //isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed".
-  async function setOverflowClip(isOpen: boolean) {
-    const bodyElement = document.body
-    if (bodyElement) {
-      if (isOpen) {
-        bodyElement.style.overflow = "visible"
-      } else {
-        // !important needed to override 'overflow: hidden' set by react-aria.
-        // 'overflow: hidden' does not work in combination with other sticky positioned elements, which clip does.
-        bodyElement.style.overflow = "clip !important"
-      }
+  const ref = useRef<HTMLDivElement | null>(null)
+  // const childCount = rooms[0]?.childrenInRoom.length ?? 0 // ToDo Update for multiroom later
+  const {
+    clearErrors,
+    formState: { errors },
+  } = useFormContext()
+
+  const [scrollPosition, setScrollPosition] = useState(0)
+  const roomError = errors["rooms"]
+  const { lockScroll, unlockScroll } = useScrollLock({
+    autoLock: false,
+  })
+  useEffect(() => {
+    if (roomError) {
+      setShowErrorModal(true)
     }
-    if (!isOpen) {
-      const state = await trigger("rooms")
-      if (state) {
-        setIsOpen(isOpen)
-      }
+  }, [roomError])
+
+  useEffect(() => {
+    clearErrors("rooms")
+  }, [clearErrors])
+
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (!roomError) return
+    if (timeoutRef.current) return
+    if (roomError) {
+      timeoutRef.current = setTimeout(() => {
+        setShowErrorModal(false)
+        // magic number originates from animation
+        // 5000ms delay + 120ms exectuion
+        timeoutRef.current = null
+      }, 5120)
     }
-  }
+
+    return () => {}
+  }, [clearErrors, roomError])
 
   useEffect(() => {
     setIsDesktop(checkIsDesktop)
   }, [checkIsDesktop])
 
-  const updateHeight = useCallback(() => {
+  const updateHeight = useCallback((containerConstraint: number) => {
     // Get available space for picker to show without going beyond screen
     const bookingWidget = document.getElementById("booking-widget")
+    const popoverElement = document.getElementById("guestsPopover")
     const maxHeight =
       window.innerHeight -
       (bookingWidget?.getBoundingClientRect().bottom ?? 0) -
       50
-    const innerContainerHeight = document
-      .getElementsByClassName(popoverId)[0]
-      ?.getBoundingClientRect().height
-    if (
-      maxHeight != containerHeight &&
+    const innerContainerHeight = popoverElement?.getBoundingClientRect().height
+
+    const shouldAdjustHeight = Boolean(
+      // height should be constrained
+      maxHeight != containerConstraint &&
       innerContainerHeight &&
       maxHeight <= innerContainerHeight
-    ) {
-      setContainerHeight(maxHeight)
-    } else if (
-      containerHeight &&
+    )
+    const hasExcessVerticalSpace = Boolean(
+      // no need to constrain height
+      containerConstraint &&
       innerContainerHeight &&
-      maxHeight > innerContainerHeight
-    ) {
-      setContainerHeight(0)
+      Math.floor(maxHeight) > Math.floor(innerContainerHeight)
+    )
+    if (shouldAdjustHeight) {
+      // avoid clipping if there's only one room
+      setContainerConstraint(Math.max(200, maxHeight))
+    } else if (hasExcessVerticalSpace) {
+      setContainerConstraint(0)
     }
-  }, [containerHeight, popoverId])
+  }, [])
 
   useEffect(() => {
-    if (isDesktop && rooms.length > 0) {
-      updateHeight()
+    if (isDesktop && rooms.length > 1) {
+      updateHeight(containerConstraint)
     }
-  }, [childCount, isDesktop, updateHeight, rooms])
+  }, [
+    isOpen,
+    scrollPosition,
+    isDesktop,
+    updateHeight,
+    containerConstraint,
+    rooms,
+  ])
 
-  return isDesktop ? (
-    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
-      <Trigger
-        rooms={rooms}
-        className={styles.triggerDesktop}
-        triggerFn={() => {
-          setIsOpen(true)
-        }}
-      />
-      <Popover
-        className={popoverId}
-        placement="bottom start"
-        offset={36}
-        style={containerHeight ? { overflow: "auto" } : undefined}
-      >
-        <Dialog className={styles.pickerContainerDesktop}>
-          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
-        </Dialog>
-      </Popover>
-    </DialogTrigger>
-  ) : (
-    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
-      <Trigger
-        rooms={rooms}
-        className={styles.triggerMobile}
-        triggerFn={() => {
-          setIsOpen(true)
-        }}
-        ariaLabelledBy={ariaLabelledBy}
-      />
-      <Modal>
-        <Dialog className={styles.pickerContainerMobile}>
-          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
+  useEffect(() => {
+    if (isOpen && isDesktop) {
+      const handleScroll = () => {
+        setScrollPosition(window.scrollY)
+      }
+
+      window.addEventListener("scroll", handleScroll)
+
+      return () => {
+        window.removeEventListener("scroll", handleScroll)
+      }
+    }
+  }, [isOpen, isDesktop, rooms])
+
+  const { overlayProps, underlayProps } = useOverlay(
+    {
+      isOpen,
+      onClose: () => {
+        setIsOpen(false)
+        unlockScroll()
+      },
+      isDismissable: !errors.rooms,
+    },
+    ref
+  )
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Trigger
+          rooms={rooms}
+          className={styles.trigger}
+          triggerFn={() => {
+            setIsOpen((prev) => !prev)
+            if (!isDesktop && !isOpen) {
+              lockScroll()
+            } else {
+              unlockScroll()
+            }
+          }}
+          ariaLabelledBy={ariaLabelledBy}
+        />
+
+        {isOpen && (
+          <div {...underlayProps}>
+            <FocusScope contain restoreFocus autoFocus>
+              <div
+                id="guestsPopover"
+                {...overlayProps}
+                ref={ref}
+                className={styles.pickerContainer}
+                data-pressed={isOpen}
+                data-rooms-open={isOpen}
+                style={
+                  isDesktop
+                    ? containerConstraint > 0
+                      ? { maxHeight: containerConstraint }
+                      : { maxHeight: "none" }
+                    : undefined
+                }
+              >
+                <PickerForm
+                  rooms={rooms}
+                  onClose={() => {
+                    setIsOpen((prev) => !prev)
+                    unlockScroll()
+                  }}
+                />
+              </div>
+            </FocusScope>
+          </div>
+        )}
+      </div>
+      {showErrorModal && !isOpen && errors.rooms && <ValidationError />}
+    </>
   )
 }
 

packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css

@@ -24,7 +24,8 @@
   }
 
   /* Make sure Date Picker is placed on top of other sticky/fixed components */
-  &:has([data-datepicker-open="true"]) {
+  &:has([data-datepicker-open="true"]),
+  &:has([data-rooms-open="true"]) {
     z-index: var(--booking-widget-open-z-index);
   }
 }
@@ -37,7 +38,7 @@
   gap: var(--Space-x3);
   height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   width: 100%;
-  padding: var(--Space-x3) var(--Space-x2) var(--Space-x7);
+  padding: var(--Space-x3) var(--Space-x2);
   position: fixed;
   left: 0;
   bottom: -100%;
@@ -85,7 +86,6 @@
 
     &.compactFormContainer {
       box-shadow: none;
-      padding-left: var(--Space-x15);
     }
   }
 

packages/booking-flow/package.json

@@ -64,6 +64,7 @@
     "libphonenumber-js": "^1.12.15",
     "motion": "^12.10.0",
     "nuqs": "2.4.3",
+    "react-aria": "^3.39.0",
     "react-aria-components": "1.8.0",
     "react-day-picker": "^9.6.7",
     "react-hook-form": "^7.56.2",

packages/design-system/lib/components/Button/button.module.css

@@ -14,7 +14,7 @@
   }
 
   &[data-disabled] {
-    cursor: unset;
+    cursor: not-allowed;
   }
 
   &[data-pending] {

packages/design-system/lib/components/Form/Checkbox/index.tsx

@@ -32,6 +32,7 @@ const CheckboxComponent = forwardRef<
     hideError,
     topAlign = false,
     errorCodeMessages,
+    disabled = false,
   },
   ref
 ) {
@@ -49,7 +50,7 @@ const CheckboxComponent = forwardRef<
       onChange={field.onChange}
       data-testid={name}
       name={name}
-      isDisabled={registerOptions?.disabled}
+      isDisabled={registerOptions?.disabled || disabled}
       excludeFromTabOrder
     >
       {({ isSelected }) => (

packages/design-system/lib/components/Select/Select.tsx

@@ -25,6 +25,7 @@ export function Select({
   isDisabled,
   icon,
   itemIcon,
+  popoverWidth,
   ...props
 }: SelectProps | SelectFilterProps) {
   const [isOpen, setIsOpen] = useState(false)
@@ -88,7 +89,11 @@ export function Select({
         />
       </Button>
 
-      <Popover className={styles.popover} shouldFlip={false}>
+      <Popover
+        className={styles.popover}
+        style={popoverWidth ? { minWidth: popoverWidth } : undefined}
+        shouldFlip={false}
+      >
         <ListBox className={styles.listBox}>
           {items.map((item, idx) => (
             <SelectItem

packages/design-system/lib/components/Select/types.ts

@@ -18,6 +18,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   label: string
   onSelectionChange?: (key: Key | null) => void
   enableFiltering?: false
+  popoverWidth?: string
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -35,4 +36,5 @@ export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
   label: string
   onSelectionChange?: (key: Key | null) => void
   enableFiltering: true
+  popoverWidth?: string
 }

yarn.lock

@@ -6053,6 +6053,7 @@ __metadata:
     libphonenumber-js: "npm:^1.12.15"
     motion: "npm:^12.10.0"
     nuqs: "npm:2.4.3"
+    react-aria: "npm:^3.39.0"
     react-aria-components: "npm:1.8.0"
     react-day-picker: "npm:^9.6.7"
     react-hook-form: "npm:^7.56.2"