Merged in feat/sw-587-sidepeek-for-room (pull request #767)

Create the sidepeek for a specific roomtype. This also changes the lightbox to use react-aria instead of radix-ui, so we use the same for the lightbox and the sidepeek. Works better together!


Approved-by: Bianca Widstam

components/Lightbox/Gallery.tsx

@@ -1,6 +1,4 @@
 "use client"
-import { DialogTitle } from "@radix-ui/react-dialog"
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 import { AnimatePresence, motion } from "framer-motion"
 
 import { ChevronRightIcon } from "@/components/Icons"
@@ -16,7 +14,6 @@ import type { GalleryProps } from "@/types/components/lightbox/lightbox"
 
 export default function Gallery({
   images,
-  dialogTitle,
   onClose,
   onSelectImage,
   onImageClick,
@@ -57,11 +54,6 @@ export default function Gallery({
       </Button>
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
-        <VisuallyHidden asChild>
-          <DialogTitle asChild>
-            <VisuallyHidden>{dialogTitle}</VisuallyHidden>
-          </DialogTitle>
-        </VisuallyHidden>
         <div className={styles.galleryHeader}>
           {mainImage.title && (
             <div className={styles.imageCaption}>

components/Lightbox/Lightbox.module.css

@@ -1,3 +1,13 @@
+@keyframes darken-background {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
 .mobileGallery {
   height: 100%;
   position: relative;
@@ -33,14 +43,22 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 10;
+  z-index: var(--lightbox-z-index);
 }
 
 .overlay {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
+  z-index: var(--lightbox-z-index);
+}
+
+.overlay[data-entering] {
+  animation: darken-background 0.2s;
+}
+
+.overlay[data-exiting] {
+  animation: darken-background 0.2s reverse;
 }
 
 .galleryContainer {

components/Lightbox/index.tsx

@@ -1,7 +1,7 @@
 "use client"
-import * as Dialog from "@radix-ui/react-dialog"
 import { AnimatePresence, motion } from "framer-motion"
 import React, { useState } from "react"
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 
 import FullView from "./FullView"
 import Gallery from "./Gallery"
@@ -62,20 +62,16 @@ export default function Lightbox({
   return (
     <>
       {triggerElement}
-      <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
-        <AnimatePresence>
-          {isOpen && (
-            <Dialog.Portal forceMount>
-              <Dialog.Overlay asChild>
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className={styles.overlay}
-                />
-              </Dialog.Overlay>
-              <Dialog.Content asChild>
+      <ModalOverlay
+        isOpen={isOpen}
+        onOpenChange={handleOpenChange}
+        className={styles.overlay}
+        isDismissable
+      >
+        <Modal>
+          <AnimatePresence>
+            {isOpen && (
+              <Dialog>
                 <motion.div
                   className={`${styles.content} ${
                     isFullView ? styles.fullViewContent : styles.galleryContent
@@ -109,11 +105,11 @@ export default function Lightbox({
                     />
                   )}
                 </motion.div>
-              </Dialog.Content>
-            </Dialog.Portal>
-          )}
-        </AnimatePresence>
-      </Dialog.Root>
+              </Dialog>
+            )}
+          </AnimatePresence>
+        </Modal>
+      </ModalOverlay>
     </>
   )
 }