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

'use client'

import { useEffect } from 'react'
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
import { useIntl } from 'react-intl'

import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'

import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'

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}
                  <IconButton
                    theme="Black"
                    style="Muted"
                    onPress={close}
                    aria-label={intl.formatMessage({
                      defaultMessage: 'Close',
                    })}
                  >
                    <MaterialIcon
                      icon="close"
                      size={24}
                      color="Icon/Interactive/Default"
                    />
                  </IconButton>
                </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
}