@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/overlays/Modal.tsx

@@ -1,285 +1,292 @@
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type MouseEvent,
-  type ReactNode,
-} from 'react'
-import { createPortal } from 'react-dom'
-import { keyframes, styled } from 'styled-components'
-import { zi } from '../../../theme/themeVars.js'
-import { ModalChromeHeader } from './ModalChromeHeader.js'
-
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
-
-export interface ModalProps {
-  open: boolean
-  onClose: () => void
-  children: ReactNode
-  title?: string
-  size?: ModalSize
-  closeOnEscape?: boolean
-  closeOnBackdropClick?: boolean
-  initialFocusRef?: React.RefObject<HTMLElement | null>
-  /** Shell titlebar with close + maximize (fullscreen is handled internally). */
-  chrome?: boolean
-  chromeTrailing?: React.ReactNode
-  bodyClassName?: string
-}
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'textarea:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',')
-
-const sizeWidths = {
-  sm: '42dvw',
-  md: '50dvw',
-  lg: '68dvw',
-  xl: 'min(1120px, calc(100vw - var(--platform-spacing-xl)))',
-} as const
-
-function firstFocusable(root: HTMLElement | null): HTMLElement | null {
-  if (!root) return null
-  return root.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
-}
-
-function trapFocus(
-  event: KeyboardEvent<HTMLDivElement>,
-  root: HTMLElement | null,
-): void {
-  if (!root) return
-  const focusables = Array.from(
-    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
-  )
-  if (focusables.length === 0) {
-    event.preventDefault()
-    root.focus()
-    return
-  }
-  const first = focusables[0]
-  const last = focusables[focusables.length - 1]
-  const active = document.activeElement as HTMLElement | null
-
-  if (event.shiftKey && active === first) {
-    event.preventDefault()
-    last.focus()
-  } else if (!event.shiftKey && active === last) {
-    event.preventDefault()
-    first.focus()
-  }
-}
-
-//#region styled-components
-
-const fadeIn = keyframes`
-  from { opacity: 0; }
-  to { opacity: 1; }
-`
-
-const StyledBackdrop = styled.div<{ $fullscreen: boolean }>`
-  position: fixed;
-  inset: 0;
-  z-index: ${zi.appModal};
-  display: flex;
-  align-items: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
-  justify-content: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
-  padding: ${({ $fullscreen }) =>
-    $fullscreen ? '0' : 'var(--platform-spacing-md)'};
-  animation: ${fadeIn} var(--platform-transition-fast);
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-`
-
-const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  max-width: ${({ $size }) =>
-    $size === 'fullscreen' ? 'none' : sizeWidths[$size]};
-  height: ${({ $size, $chrome }) => {
-    if ($size === 'fullscreen') return '100%'
-    if ($chrome && $size === 'xl') {
-      return 'min(720px, calc(100vh - var(--platform-spacing-xl)))'
-    }
-    return 'auto'
-  }};
-  min-height: ${({ $size, $chrome }) => {
-    if ($size === 'fullscreen') return '100%'
-    if ($chrome && $size === 'xl') {
-      return 'min(460px, calc(100vh - var(--platform-spacing-xl)))'
-    }
-    return `min(calc(${sizeWidths[$size]} / 1.3), calc(100vh - var(--platform-spacing-xl)))`
-  }};
-  max-height: ${({ $size, $chrome }) => {
-    if ($size === 'fullscreen') return 'none'
-    if ($chrome && $size === 'xl') return 'none'
-    return 'calc(100vh - var(--platform-spacing-xl))'
-  }};
-  overflow: hidden;
-  padding: 0;
-  --platform-modal-inset: var(--platform-spacing-lg);
-  background: var(--platform-colors-elevated);
-  color: var(--platform-colors-text);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 1rem;
-  box-shadow: var(--platform-shadow-md);
-  animation: ${fadeIn} var(--platform-transition-fast);
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-`
-
-const StyledTitle = styled.h2`
-  flex: 0 0 auto;
-  margin: 0;
-  padding: var(--platform-modal-inset);
-  font-size: var(--platform-typography-font-size-lg);
-  font-weight: var(--platform-typography-font-weight-bold);
-  line-height: var(--platform-typography-line-height-tight);
-`
-
-const StyledBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  & > *:only-child {
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-  }
-
-  &:not(.asset-library-modal-body) > *:only-child:not(:has([role='tablist'])) {
-    padding: var(--platform-modal-inset);
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  &.asset-library-modal-body {
-    overflow: hidden;
-  }
-`
-
-//#endregion
-
-export function Modal({
-  open,
-  onClose,
-  children,
-  title,
-  size = 'md',
-  closeOnEscape = true,
-  closeOnBackdropClick,
-  initialFocusRef,
-  chrome = false,
-  chromeTrailing,
-  bodyClassName,
-}: ModalProps): React.ReactElement | null {
-  const dialogRef = useRef<HTMLDivElement | null>(null)
-  const previouslyFocusedRef = useRef<HTMLElement | null>(null)
-  const titleId = useId()
-  const [maximized, setMaximized] = useState(false)
-  const layoutSize: ModalSize = chrome && maximized ? 'fullscreen' : size
-  const fullscreen = layoutSize === 'fullscreen'
-  const resolvedCloseOnBackdropClick = closeOnBackdropClick ?? !fullscreen
-
-  useEffect(() => {
-    if (!open) setMaximized(false)
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
-    return () => {
-      previouslyFocusedRef.current?.focus?.()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const target =
-      initialFocusRef?.current ??
-      firstFocusable(dialogRef.current) ??
-      dialogRef.current
-    target?.focus()
-  }, [open, initialFocusRef])
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'Escape' && closeOnEscape) {
-        event.stopPropagation()
-        onClose()
-        return
-      }
-      if (event.key === 'Tab') {
-        trapFocus(event, dialogRef.current)
-      }
-    },
-    [closeOnEscape, onClose],
-  )
-
-  const handleBackdropClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
-      if (
-        event.target === event.currentTarget &&
-        resolvedCloseOnBackdropClick
-      ) {
-        onClose()
-      }
-    },
-    [resolvedCloseOnBackdropClick, onClose],
-  )
-
-  if (!open) return null
-
-  return createPortal(
-    <StyledBackdrop $fullscreen={fullscreen} onMouseDown={handleBackdropClick}>
-      <StyledDialog
-        ref={dialogRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-        tabIndex={-1}
-        $size={layoutSize}
-        $chrome={chrome}
-        onKeyDown={handleKeyDown}
-      >
-        {chrome ? (
-          <ModalChromeHeader
-            title={title}
-            titleId={titleId}
-            onClose={onClose}
-            onMaximize={() => setMaximized(current => !current)}
-            maximized={maximized}
-            trailing={chromeTrailing}
-          />
-        ) : title ? (
-          <StyledTitle id={titleId}>{title}</StyledTitle>
-        ) : null}
-        <StyledBody className={bodyClassName}>
-          {children}
-        </StyledBody>
-      </StyledDialog>
-    </StyledBackdrop>,
-    document.body,
-  )
-}
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { keyframes, styled } from 'styled-components'
+import { zi } from '../../../theme/themeVars.js'
+import { ModalChromeHeader } from './ModalChromeHeader.js'
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
+
+export interface ModalProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  title?: string
+  size?: ModalSize
+  closeOnEscape?: boolean
+  closeOnBackdropClick?: boolean
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  /** Shell titlebar with close + maximize (fullscreen is handled internally). */
+  chrome?: boolean
+  chromeTrailing?: React.ReactNode
+  bodyClassName?: string
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+const sizeWidths = {
+  sm: '42dvw',
+  md: '50dvw',
+  lg: '68dvw',
+  xl: 'min(1120px, calc(100vw - var(--platform-spacing-xl)))',
+} as const
+
+function firstFocusable(root: HTMLElement | null): HTMLElement | null {
+  if (!root) return null
+  return root.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
+}
+
+function trapFocus(
+  event: KeyboardEvent<HTMLDivElement>,
+  root: HTMLElement | null,
+): void {
+  if (!root) return
+  const focusables = Array.from(
+    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  )
+  if (focusables.length === 0) {
+    event.preventDefault()
+    root.focus()
+    return
+  }
+  const first = focusables[0]
+  const last = focusables[focusables.length - 1]
+  const active = document.activeElement as HTMLElement | null
+
+  if (event.shiftKey && active === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && active === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+//#region styled-components
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`
+
+const StyledBackdrop = styled.div<{ $fullscreen: boolean }>`
+  position: fixed;
+  inset: 0;
+  z-index: ${zi.appModal};
+  display: flex;
+  align-items: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
+  justify-content: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
+  padding: ${({ $fullscreen }) =>
+    $fullscreen ? '0' : 'var(--platform-spacing-md)'};
+  animation: ${fadeIn} var(--platform-transition-fast);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`
+
+const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  max-width: ${({ $size }) =>
+    $size === 'fullscreen' ? 'none' : sizeWidths[$size]};
+  height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return '100%'
+    if ($chrome && $size === 'xl') {
+      return 'min(720px, calc(100vh - var(--platform-spacing-xl)))'
+    }
+    return 'auto'
+  }};
+  min-height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return '100%'
+    if ($chrome && $size === 'xl') {
+      return 'min(460px, calc(100vh - var(--platform-spacing-xl)))'
+    }
+    return `min(calc(${sizeWidths[$size]} / 1.3), calc(100vh - var(--platform-spacing-xl)))`
+  }};
+  max-height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return 'none'
+    if ($chrome && $size === 'xl') return 'none'
+    return 'calc(100vh - var(--platform-spacing-xl))'
+  }};
+  overflow: hidden;
+  padding: 0;
+  --platform-modal-inset: var(--platform-spacing-lg);
+  background: var(--platform-colors-elevated);
+  color: var(--platform-colors-text);
+  border: ${({ $size }) =>
+    $size === 'fullscreen' ? '0' : '1px solid var(--platform-colors-border)'};
+  border-radius: ${({ $size }) => ($size === 'fullscreen' ? '0' : '1rem')};
+  box-shadow: ${({ $size }) =>
+    $size === 'fullscreen' ? 'none' : 'var(--platform-shadow-md)'};
+  animation: ${fadeIn} var(--platform-transition-fast);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`
+
+const StyledTitle = styled.h2`
+  flex: 0 0 auto;
+  margin: 0;
+  padding: var(--platform-modal-inset);
+  font-size: var(--platform-typography-font-size-lg);
+  font-weight: var(--platform-typography-font-weight-bold);
+  line-height: var(--platform-typography-line-height-tight);
+`
+
+const StyledBody = styled.div<{ $fullscreen: boolean }>`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  & > *:only-child {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  ${({ $fullscreen }) =>
+    !$fullscreen
+      ? `
+  &:not(.asset-library-modal-body) > *:only-child:not(:has([role='tablist'])) {
+    padding: var(--platform-modal-inset);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+`
+      : ''}
+
+  &.asset-library-modal-body {
+    overflow: hidden;
+  }
+`
+
+//#endregion
+
+export function Modal({
+  open,
+  onClose,
+  children,
+  title,
+  size = 'md',
+  closeOnEscape = true,
+  closeOnBackdropClick,
+  initialFocusRef,
+  chrome = false,
+  chromeTrailing,
+  bodyClassName,
+}: ModalProps): React.ReactElement | null {
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null)
+  const titleId = useId()
+  const [maximized, setMaximized] = useState(false)
+  const layoutSize: ModalSize = chrome && maximized ? 'fullscreen' : size
+  const fullscreen = layoutSize === 'fullscreen'
+  const resolvedCloseOnBackdropClick = closeOnBackdropClick ?? !fullscreen
+
+  useEffect(() => {
+    if (!open) setMaximized(false)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
+    return () => {
+      previouslyFocusedRef.current?.focus?.()
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const target =
+      initialFocusRef?.current ??
+      firstFocusable(dialogRef.current) ??
+      dialogRef.current
+    target?.focus()
+  }, [open, initialFocusRef])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape' && closeOnEscape) {
+        event.stopPropagation()
+        onClose()
+        return
+      }
+      if (event.key === 'Tab') {
+        trapFocus(event, dialogRef.current)
+      }
+    },
+    [closeOnEscape, onClose],
+  )
+
+  const handleBackdropClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (
+        event.target === event.currentTarget &&
+        resolvedCloseOnBackdropClick
+      ) {
+        onClose()
+      }
+    },
+    [resolvedCloseOnBackdropClick, onClose],
+  )
+
+  if (!open) return null
+
+  return createPortal(
+    <StyledBackdrop $fullscreen={fullscreen} onMouseDown={handleBackdropClick}>
+      <StyledDialog
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+        $size={layoutSize}
+        $chrome={chrome}
+        onKeyDown={handleKeyDown}
+      >
+        {chrome ? (
+          <ModalChromeHeader
+            title={title}
+            titleId={titleId}
+            onClose={onClose}
+            onMaximize={() => setMaximized(current => !current)}
+            maximized={maximized}
+            trailing={chromeTrailing}
+          />
+        ) : title ? (
+          <StyledTitle id={titleId}>{title}</StyledTitle>
+        ) : null}
+        <StyledBody className={bodyClassName} $fullscreen={fullscreen}>
+          {children}
+        </StyledBody>
+      </StyledDialog>
+    </StyledBackdrop>,
+    document.body,
+  )
+}