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

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 = useRef<HTMLDivElement>(null)
-  const [rootDiv, setRootDiv] = useState<HTMLDivElement | undefined>(undefined)
-
-  function setRef(node: HTMLDivElement | null) {
-    if (node) {
-      setRootDiv(node)
-    }
-  }
 
   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)

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
 }

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}