Merged in chore/SW-3298-move-sidepeekselfcontrolled- (pull request #2710)

chore(SW-3298): Moved SidePeekSelfControlled to design system

* chore(SW-3298): Moved SidePeekSelfControlled to design system


Approved-by: Anton Gunnarsson

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

@@ -0,0 +1,72 @@
+'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
+}