From f9f55ca0bf32088960edea2c0ee235bbf657cbe5 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 27 Feb 2025 14:56:10 +0000
Subject: [PATCH] Merged in fix/SW-1441-sidepeek-z-index (pull request #1437)

fix(SW-1441): fixed issue with z-index on sidepeeks inside teaserCards

* fix(SW-1441): fixed issue with z-index on sidepeeks inside teaserCards


Approved-by: Fredrik Thorsson
---
 .../TempDesignSystem/SidePeek/index.tsx         | 17 ++++++-----------
 .../TempDesignSystem/SidePeek/sidePeek.ts       |  1 +
 .../TeaserCard/Sidepeek/index.tsx               |  1 +
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
index 76aea7dcf..b4df88370 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useIsSSR } from "@react-aria/ssr"
-import { useContext, useState } from "react"
+import { useContext, useRef } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
@@ -21,17 +21,11 @@ function SidePeek({
   contentKey,
   handleClose,
   isOpen,
+  openInRoot = false,
 }: 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 rootDiv = useRef<HTMLDivElement>(null)
 
   const context = useContext(SidePeekContext)
   function onClose() {
@@ -47,10 +41,11 @@ function SidePeek({
       </div>
     )
   }
+
   return (
-    <div ref={setRef}>
+    <div ref={openInRoot ? null : rootDiv}>
       <ModalOverlay
-        UNSTABLE_portalContainer={rootDiv}
+        UNSTABLE_portalContainer={rootDiv.current || undefined}
         className={styles.overlay}
         isOpen={
           isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.ts b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.ts
index 6caa9f0f4..ffd95f760 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.ts
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.ts
@@ -2,5 +2,6 @@ export interface SidePeekProps {
   contentKey?: string
   title: string
   isOpen?: boolean
+  openInRoot?: boolean
   handleClose?: (isOpen: boolean) => void
 }
diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
index bb4c39761..e9c3af6a4 100644
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -37,6 +37,7 @@ export default function TeaserCardSidepeek({
         title={heading}
         isOpen={sidePeekIsOpen}
         handleClose={() => setSidePeekIsOpen(false)}
+        openInRoot
       >
         <JsonToHtml
           nodes={content.json.children}