fix(BOOK-146): Added scrolling possibility on Sidepeek dialog instead of content to support keyboard scrolling

Approved-by: Bianca Widstam

packages/design-system/lib/components/SidePeek/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useContext, useRef } from 'react'
+import { useCallback, useContext, useRef } from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 import { IconButton } from '../IconButton'
 import { MaterialIcon } from '../Icons/MaterialIcon'
@@ -10,6 +10,7 @@ import { SidePeekContext } from './SidePeekContext'
 
 import SidePeekSEO from './SidePeekSEO'
 
+import { debounce } from '@scandic-hotels/common/utils/debounce'
 import styles from './sidePeek.module.css'
 
 interface SidePeekProps {
@@ -31,8 +32,33 @@ export default function SidePeek({
   closeLabel,
 }: React.PropsWithChildren<SidePeekProps>) {
   const rootDiv = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
 
   const context = useContext(SidePeekContext)
+
+  const updateHeightRefCallback = useCallback((node: HTMLElement | null) => {
+    if (node) {
+      const debouncedUpdate = debounce(([entry]: ResizeObserverEntry[]) => {
+        const height = entry.contentRect.height
+
+        dialogRef.current?.style.setProperty(
+          '--sidepeek-header-height',
+          `${height}px`
+        )
+      }, 100)
+
+      const observer = new ResizeObserver(debouncedUpdate)
+      observer.observe(node)
+
+      return () => {
+        observer.unobserve(node)
+        observer.disconnect()
+        dialogRef.current?.style.removeProperty('--sidepeek-header-height')
+      }
+    }
+  }, [])
+
   function onClose() {
     const closeHandler = handleClose || context?.handleClose
     closeHandler?.(false)
@@ -51,25 +77,37 @@ export default function SidePeek({
           isDismissable
         >
           <Modal className={styles.modal}>
-            <Dialog className={styles.dialog} aria-label={title}>
+            <Dialog
+              ref={dialogRef}
+              className={styles.dialog}
+              aria-label={title}
+            >
               <aside className={styles.aside}>
-                <header className={styles.header}>
-                  {title ? (
-                    <Typography variant="Title/md">
-                      <h2 className={styles.heading}>{title}</h2>
-                    </Typography>
-                  ) : null}
-                  <IconButton
-                    theme="Black"
-                    style="Muted"
-                    aria-label={closeLabel}
-                    onPress={onClose}
-                  >
-                    <MaterialIcon
-                      icon="close"
-                      color="Icon/Interactive/Default"
-                    />
-                  </IconButton>
+                <header
+                  ref={(node) => {
+                    headerRef.current = node
+                    return updateHeightRefCallback(node)
+                  }}
+                  className={styles.header}
+                >
+                  <div className={styles.headerContent}>
+                    {title ? (
+                      <Typography variant="Title/md">
+                        <h2 className={styles.heading}>{title}</h2>
+                      </Typography>
+                    ) : null}
+                    <IconButton
+                      theme="Black"
+                      style="Muted"
+                      aria-label={closeLabel}
+                      onPress={onClose}
+                    >
+                      <MaterialIcon
+                        icon="close"
+                        color="Icon/Interactive/Default"
+                      />
+                    </IconButton>
+                  </div>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
               </aside>