feat(SW-341): add hotels listing sidepeeks

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useIsSSR } from "@react-aria/ssr"
-import { useContext } from "react"
+import { useContext, useState } from "react"
 import {
   Dialog,
   DialogTrigger,
@@ -29,6 +29,15 @@ function SidePeek({
 }: React.PropsWithChildren<SidePeekProps>) {
   const isSSR = useIsSSR()
   const intl = useIntl()
+
+  const [rootDiv, setRootDiv] = useState<HTMLDivElement | undefined>(undefined)
+
+  function setRef(node: HTMLDivElement | null) {
+    if (node) {
+      setRootDiv(node)
+    }
+  }
+
   const context = useContext(SidePeekContext)
   function onClose() {
     const closeHandler = handleClose || context?.handleClose
@@ -44,42 +53,45 @@ function SidePeek({
     )
   }
   return (
-    <DialogTrigger>
-      <ModalOverlay
-        className={styles.overlay}
-        isOpen={isOpen || contentKey === context?.activeSidePeek}
-        onOpenChange={onClose}
-        isDismissable
-      >
-        <Modal className={styles.modal}>
-          <Dialog className={styles.dialog}>
-            <aside className={styles.sidePeek}>
-              <header className={styles.header}>
-                {title ? (
-                  <Title
-                    color="burgundy"
-                    textTransform="uppercase"
-                    level="h2"
-                    as="h3"
+    <div ref={setRef}>
+      <DialogTrigger>
+        <ModalOverlay
+          UNSTABLE_portalContainer={rootDiv}
+          className={styles.overlay}
+          isOpen={isOpen || contentKey === context?.activeSidePeek}
+          onOpenChange={onClose}
+          isDismissable
+        >
+          <Modal className={styles.modal}>
+            <Dialog className={styles.dialog}>
+              <aside className={styles.sidePeek}>
+                <header className={styles.header}>
+                  {title ? (
+                    <Title
+                      color="burgundy"
+                      textTransform="uppercase"
+                      level="h2"
+                      as="h3"
+                    >
+                      {title}
+                    </Title>
+                  ) : null}
+                  <Button
+                    aria-label={intl.formatMessage({ id: "Close" })}
+                    className={styles.closeButton}
+                    intent="text"
+                    onPress={onClose}
                   >
-                    {title}
-                  </Title>
-                ) : null}
-                <Button
-                  aria-label={intl.formatMessage({ id: "Close" })}
-                  className={styles.closeButton}
-                  intent="text"
-                  onPress={onClose}
-                >
-                  <CloseIcon color="burgundy" height={32} width={32} />
-                </Button>
-              </header>
-              <div className={styles.sidePeekContent}>{children}</div>
-            </aside>
-          </Dialog>
-        </Modal>
-      </ModalOverlay>
-    </DialogTrigger>
+                    <CloseIcon color="burgundy" height={32} width={32} />
+                  </Button>
+                </header>
+                <div className={styles.sidePeekContent}>{children}</div>
+              </aside>
+            </Dialog>
+          </Modal>
+        </ModalOverlay>
+      </DialogTrigger>
+    </div>
   )
 }