From bdbdfa80ab9ed6bb1b5c6c001ad6160fd5004f51 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 15 Nov 2024 15:14:00 +0100
Subject: [PATCH] feat: add useSetOverflowVisibleOnRA hook

---
 .../EnterDetails/Summary/index.tsx            |  4 +--
 .../FlexibilityOption/Popover/index.tsx       | 36 -------------------
 .../Popover/popover.module.css                | 12 -------
 components/TempDesignSystem/Popover/index.tsx |  6 ++--
 .../selectRate/pricePopover.ts                |  5 ---
 5 files changed, 5 insertions(+), 58 deletions(-)
 delete mode 100644 components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
 delete mode 100644 components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css
 delete mode 100644 types/components/hotelReservation/selectRate/pricePopover.ts

diff --git a/components/HotelReservation/EnterDetails/Summary/index.tsx b/components/HotelReservation/EnterDetails/Summary/index.tsx
index 2e0bdb2cd..7507a6945 100644
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/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>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
deleted file mode 100644
index 62979d2c7..000000000
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css
deleted file mode 100644
index bb60ba100..000000000
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.arrow {
-  top: -6px;
-}
-
-.closeButton {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
diff --git a/components/TempDesignSystem/Popover/index.tsx b/components/TempDesignSystem/Popover/index.tsx
index 1d389c648..b1b03f340 100644
--- a/components/TempDesignSystem/Popover/index.tsx
+++ b/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
diff --git a/types/components/hotelReservation/selectRate/pricePopover.ts b/types/components/hotelReservation/selectRate/pricePopover.ts
deleted file mode 100644
index 2a7c84d56..000000000
--- a/types/components/hotelReservation/selectRate/pricePopover.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { PopoverProps } from "react-aria-components"
-
-export interface PricePopoverProps extends Omit<PopoverProps, "children"> {
-  children: React.ReactNode
-}