fix(BOOK-146): Synced default Sidepeek and SelfControlled Sidepeek in regards of functionality and looks

Approved-by: Bianca Widstam

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

@@ -0,0 +1,94 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+import { useIntl } from 'react-intl'
+
+import usePopStateHandler from '@scandic-hotels/common/hooks/usePopStateHandler'
+
+import { IconButton } from '../IconButton'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+
+import SidePeekSEO from './SidePeekSEO'
+
+import { KeepBodyVisible } from './KeepBodyVisible'
+import styles from './sidePeek.module.css'
+
+interface SidePeekSelfControlledProps extends React.PropsWithChildren {
+  title: string
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function SidePeekSelfControlled({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: SidePeekSelfControlledProps) {
+  const intl = useIntl()
+
+  function handleClose(moveBack = false) {
+    if (moveBack) {
+      window.history.back()
+    } else {
+      onClose()
+    }
+  }
+
+  // Only register popstate handler when open
+  usePopStateHandler(() => handleClose(), isOpen)
+
+  useEffect(() => {
+    if (isOpen) {
+      window.history.pushState(null, '', window.location.href)
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      <ModalOverlay
+        className={styles.overlay}
+        isDismissable
+        onOpenChange={() => handleClose(true)}
+        isOpen={isOpen}
+      >
+        <Modal className={styles.modal}>
+          <Dialog className={styles.dialog} aria-label={title}>
+            <aside className={styles.aside}>
+              <header className={styles.header}>
+                <div className={styles.headerContent}>
+                  {title ? (
+                    <Typography variant="Title/md" className={styles.heading}>
+                      <h2>{title}</h2>
+                    </Typography>
+                  ) : null}
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
+                    onPress={() => handleClose(true)}
+                    aria-label={intl.formatMessage({
+                      id: 'common.close',
+                      defaultMessage: 'Close',
+                    })}
+                  >
+                    <MaterialIcon
+                      icon="close"
+                      size={24}
+                      color="Icon/Interactive/Default"
+                    />
+                  </IconButton>
+                </div>
+              </header>
+              <div className={styles.sidePeekContent}>{children}</div>
+              <KeepBodyVisible />
+            </aside>
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+
+      <SidePeekSEO title={title}>{children}</SidePeekSEO>
+    </>
+  )
+}