72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
|
|
|
|
import Button from "../Button"
|
|
import SidePeekSEO from "./SidePeekSEO"
|
|
|
|
import styles from "./sidePeekSelfControlled.module.css"
|
|
|
|
import type { SidePeekSelfControlledProps } from "./sidePeek"
|
|
|
|
export default function SidePeekSelfControlled({
|
|
children,
|
|
title,
|
|
}: React.PropsWithChildren<SidePeekSelfControlledProps>) {
|
|
const intl = useIntl()
|
|
return (
|
|
<>
|
|
<ModalOverlay className={styles.overlay} isDismissable>
|
|
<Modal className={styles.modal}>
|
|
<Dialog className={styles.dialog} aria-label={title}>
|
|
{({ close }) => (
|
|
<aside className={styles.sidePeek}>
|
|
<header className={styles.header}>
|
|
{title ? (
|
|
<Typography variant="Title/md" className={styles.heading}>
|
|
<h2>{title}</h2>
|
|
</Typography>
|
|
) : null}
|
|
<Button
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Close",
|
|
})}
|
|
className={styles.closeButton}
|
|
intent="text"
|
|
onPress={close}
|
|
>
|
|
<MaterialIcon
|
|
icon="close"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
</Button>
|
|
</header>
|
|
<div className={styles.sidePeekContent}>{children}</div>
|
|
<KeepBodyVisible />
|
|
</aside>
|
|
)}
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
|
|
<SidePeekSEO title={title}>{children}</SidePeekSEO>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function KeepBodyVisible() {
|
|
const toggle = useSetOverflowVisibleOnRA()
|
|
useEffect(() => {
|
|
toggle(true)
|
|
return () => toggle(false)
|
|
}, [toggle])
|
|
return null
|
|
}
|