feat: add useSetOverflowVisibleOnRA hook

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -180,7 +180,7 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
             {room.cancellationText}
           </Caption>
           <Popover
-            placement={"bottom left"}
+            placement="bottom left"
             triggerContent={
               <Caption color="burgundy" type="underline">
                 {intl.formatMessage({ id: "Rate details" })}
@@ -189,7 +189,7 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
           >
             <aside className={styles.rateDetailsPopover}>
               <header>
-                <Caption type={"bold"}>{room.cancellationText}</Caption>
+                <Caption type="bold">{room.cancellationText}</Caption>
               </header>
               {room.rateDetails?.map((detail, idx) => (
                 <Caption key={`rateDetails-${idx}`}>{detail}</Caption>

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx

@@ -1,36 +0,0 @@
-import { Button, Dialog, OverlayArrow, Popover } from "react-aria-components"
-
-import { CloseIcon } from "@/components/Icons"
-
-import styles from "./popover.module.css"
-
-import { PricePopoverProps } from "@/types/components/hotelReservation/selectRate/pricePopover"
-
-export default function PricePopover({
-  children,
-  ...props
-}: PricePopoverProps) {
-  return (
-    <Popover {...props}>
-      <OverlayArrow className={styles.arrow}>
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          style={{ display: "block", transform: "rotate(180deg)" }}
-        >
-          <path d="M0 0L6 6L12 0" fill="white" />
-        </svg>
-      </OverlayArrow>
-      <Dialog>
-        <Button
-          onPress={() => props.onOpenChange?.(false)}
-          className={styles.closeButton}
-        >
-          <CloseIcon className={styles.closeIcon} />
-        </Button>
-        {children}
-      </Dialog>
-    </Popover>
-  )
-}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css

@@ -1,12 +0,0 @@
-.arrow {
-  top: -6px;
-}
-
-.closeButton {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  background: none;
-  border: none;
-  cursor: pointer;
-}

components/TempDesignSystem/Popover/index.tsx

@@ -1,4 +1,3 @@
-import { useRef } from "react"
 import {
   Button,
   Dialog,
@@ -8,6 +7,7 @@ import {
 } from "react-aria-components"
 
 import { CloseLargeIcon } from "@/components/Icons"
+import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 
 import { Arrow } from "./Arrow"
 import { PopoverProps } from "./popover"
@@ -19,10 +19,10 @@ export default function Popover({
   children,
   ...props
 }: PopoverProps) {
-  let triggerRef = useRef(null)
+  const setOverflowVisible = useSetOverFlowVisibleOnRA()
 
   return (
-    <DialogTrigger>
+    <DialogTrigger onOpenChange={setOverflowVisible}>
       <Button className={styles.trigger}>{triggerContent}</Button>
 
       <RAPopover

types/components/hotelReservation/selectRate/pricePopover.ts

@@ -1,5 +0,0 @@
-import type { PopoverProps } from "react-aria-components"
-
-export interface PricePopoverProps extends Omit<PopoverProps, "children"> {
-  children: React.ReactNode
-}