@duro-app/ui 5.11.0 → 5.12.0

package/src/components/Dialog/Dialog.tsx

@@ -1,30 +1,32 @@
 import {createPortal} from 'react-dom'
-import {
-  type ReactNode,
-  type RefObject,
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  useId,
-  useRef,
-} from 'react'
+import {type ReactNode, type RefObject, useEffect, useCallback, useId, useRef} from 'react'
 import {html} from 'react-strict-dom'
-import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
+import type {DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {partStyles} from './parts.css'
+import {
+  Body,
+  Description,
+  DialogContext,
+  Footer,
+  Header,
+  Title,
+  useDialog,
+  type DialogSize,
+} from './parts'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {ModalContext} from '../../shared/ModalContext'
 import {devWarnOnce} from '../../shared/devWarnOnce'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 
 // --- Types ---
 
+export type {DialogSize}
+
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
 
-export type DialogSize = 'sm' | 'md' | 'lg'
-
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
   minimal: styles.closeDurationMinimal,
@@ -35,30 +37,6 @@ const closeDurationMap = {
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>
 
-// --- Context ---
-
-interface DialogContextValue {
-  open: boolean
-  closing: boolean
-  closeDuration: DurationToken
-  dismissable: boolean
-  requestOpen: () => void
-  requestClose: () => void
-  titleId: string
-  descriptionId: string
-  popupRef: RefObject<HTMLDivElement | null>
-  /** Dialog.Close parts currently rendered (for the closeOnEscape dev warning). */
-  registerClose: () => () => void
-}
-
-const DialogContext = createContext<DialogContextValue | null>(null)
-
-function useDialog() {
-  const ctx = useContext(DialogContext)
-  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
-  return ctx
-}
-
 // --- Root ---
 
 interface RootProps {
@@ -93,55 +71,28 @@ function Root({
   initialFocus,
   closeAnimationDuration = 'fast',
 }: RootProps) {
-  const isControlled = controlledOpen !== undefined
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const [closing, setClosing] = useState(false)
-  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const {
+    open: isOpen,
+    present,
+    closing,
+    requestOpen,
+    requestClose,
+  } = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
   const popupRef = useRef<HTMLDivElement>(null)
 
-  const isOpen = isControlled ? controlledOpen : internalOpen
-
   const titleId = useId()
   const descriptionId = useId()
 
-  const requestOpen = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-    }
-    setClosing(false)
-    if (!isControlled) setInternalOpen(true)
-    onOpenChange?.(true)
-  }, [isControlled, onOpenChange])
-
-  const requestClose = useCallback(() => {
-    setClosing(true)
-    closingTimerRef.current = setTimeout(() => {
-      setClosing(false)
-      closingTimerRef.current = null
-      if (!isControlled) setInternalOpen(false)
-      onOpenChange?.(false)
-    }, DURATION_MS[closeAnimationDuration])
-  }, [isControlled, onOpenChange, closeAnimationDuration])
-
-  // If controlled open goes false externally, trigger close animation
-  useEffect(() => {
-    if (isControlled && !controlledOpen && !closing) {
-      // Already closed, nothing to animate
-    }
-  }, [isControlled, controlledOpen, closing])
-
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
-    }
-  }, [])
-
   // Handle Escape key. A layer inside the dialog (a Menu, a Select) that
   // already handled it marks the event, and the dialog stays open.
   useEffect(() => {
-    if (!isOpen && !closing) return
+    if (!present) return
     if (!closeOnEscape) return
 
     function onKeyDown(e: KeyboardEvent) {
@@ -151,7 +102,7 @@ function Root({
     }
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
-  }, [isOpen, closing, closeOnEscape, requestClose])
+  }, [present, closeOnEscape, requestClose])
 
   // Focus: into the dialog on open (initialFocus, else the first focusable
   // element, else the dialog itself), back to what had it on close. The
@@ -180,29 +131,29 @@ function Root({
           'Dialog.Root has closeOnEscape={false} and no Dialog.Close: a keyboard user cannot leave this dialog. Render a Dialog.Close, or keep Escape.',
         )
       }
-    } else if (!isOpen && !closing && wasOpenRef.current) {
+    } else if (!present && wasOpenRef.current) {
       const target = previousFocusRef.current
       previousFocusRef.current = null
       if (target?.isConnected) target.focus({preventScroll: true})
     }
-    wasOpenRef.current = isOpen || closing
-  }, [isOpen, closing, initialFocus, closeOnEscape])
+    wasOpenRef.current = present
+  }, [isOpen, present, initialFocus, closeOnEscape])
 
   // Lock body scroll when open
   useEffect(() => {
-    if (isOpen || closing) {
+    if (present) {
       const prev = document.body.style.overflow
       document.body.style.overflow = 'hidden'
       return () => {
         document.body.style.overflow = prev
       }
     }
-  }, [isOpen, closing])
+  }, [present])
 
   return (
     <DialogContext.Provider
       value={{
-        open: isOpen || closing,
+        open: present,
         closing,
         closeDuration: closeAnimationDuration,
         dismissable,
@@ -229,7 +180,7 @@ function Trigger({children}: TriggerProps) {
   const {requestOpen} = useDialog()
 
   return (
-    <html.div onClick={requestOpen} style={styles.inlineWrapper}>
+    <html.div onClick={requestOpen} style={partStyles.inlineWrapper}>
       {children}
     </html.div>
   )
@@ -288,7 +239,7 @@ function Portal({children, size = 'md'}: PortalProps) {
           aria-describedby={descriptionId}
           style={[
             styles.popup,
-            styles[size],
+            partStyles[size],
             closing && styles.popupClosing,
             closing && closeDurationMap[closeDuration],
             !closing && styles.popupOpen,
@@ -310,46 +261,6 @@ function Portal({children, size = 'md'}: PortalProps) {
   return mount ? createPortal(node, mount) : node
 }
 
-// --- Header ---
-
-function Header({children}: {children: ReactNode}) {
-  return <html.div style={styles.header}>{children}</html.div>
-}
-
-// --- Title ---
-
-function Title({children}: {children: ReactNode}) {
-  const {titleId} = useDialog()
-  return (
-    <html.h2 id={titleId} style={styles.title}>
-      {children}
-    </html.h2>
-  )
-}
-
-// --- Description ---
-
-function Description({children}: {children: ReactNode}) {
-  const {descriptionId} = useDialog()
-  return (
-    <html.p id={descriptionId} style={styles.description}>
-      {children}
-    </html.p>
-  )
-}
-
-// --- Body ---
-
-function Body({children}: {children: ReactNode}) {
-  return <html.div style={styles.body}>{children}</html.div>
-}
-
-// --- Footer ---
-
-function Footer({children}: {children: ReactNode}) {
-  return <html.div style={styles.footer}>{children}</html.div>
-}
-
 // --- Close ---
 
 interface CloseProps {
@@ -363,14 +274,14 @@ function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
 
   if (children) {
     return (
-      <html.div onClick={requestClose} style={styles.inlineWrapper}>
+      <html.div onClick={requestClose} style={partStyles.inlineWrapper}>
         {children}
       </html.div>
     )
   }
 
   return (
-    <html.button onClick={requestClose} aria-label={ariaLabel} style={styles.closeButton}>
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={partStyles.closeButton}>
       <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
         <path
           d="M4 4l8 8M12 4l-8 8"

package/src/components/Dialog/native.css.ts

@@ -0,0 +1,78 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * Native Dialog surfaces. RSD has no CSS animations on native, so enter and
+ * exit are transitions between a hidden and a shown state (polyfilled with
+ * Animated).
+ */
+export const nativeStyles = css.create({
+  fill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  backdrop: {
+    backgroundColor: colors.scrim,
+    transitionProperty: 'opacity',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.easeOut,
+  },
+  // Padding around the panel inside the RN viewport view.
+  inset: {
+    display: 'flex',
+    padding: spacing.lg,
+    width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
+    alignItems: 'center',
+  },
+  popup: {
+    backgroundColor: colors.bgCard,
+    borderRadius: radii.lg,
+    boxShadow: shadows.lg,
+    width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    transitionProperty: 'opacity, transform',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.easeOut,
+  },
+  // The Body's padding inside its ScrollView (no flex: it sizes to content).
+  bodyContent: {
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+  },
+  // 85% of the window, as the web caps the panel at 85vh: a percentage
+  // max-height has no definite parent to resolve against here. The Body
+  // (a ScrollView) yields.
+  maxHeight: (height: number) => ({maxHeight: height}),
+  shown: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+  hidden: {
+    opacity: 0,
+    transform: 'scale(0.97)',
+  },
+  exitInstant: {transitionDuration: duration.instant},
+  exitMinimal: {transitionDuration: duration.minimal},
+  exitQuick: {transitionDuration: duration.quick},
+  exitFast: {transitionDuration: duration.fast},
+  exitBrisk: {transitionDuration: duration.brisk},
+  exitBase: {transitionDuration: duration.base},
+  exitSlow: {transitionDuration: duration.slow},
+})

package/src/components/Dialog/parts.css.ts

@@ -0,0 +1,101 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/** Styles of the Dialog parts both platforms draw (no animations: native has none). */
+export const partStyles = css.create({
+  // --- Sizes ---
+  sm: {maxWidth: sizes.dialogSm},
+  md: {maxWidth: sizes.dialogMd},
+  lg: {maxWidth: sizes.dialogLg},
+
+  // --- Header ---
+  header: {
+    // Header, Description and Footer keep their size; only the Body yields.
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+    gap: spacing.md,
+  },
+
+  // --- Title ---
+  title: {
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    margin: 0,
+  },
+
+  // --- Description ---
+  description: {
+    flexShrink: 0,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.textMuted,
+    margin: 0,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+  },
+
+  // --- Body ---
+  body: {
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    overflowY: 'auto',
+    flex: 1,
+  },
+
+  // --- Footer ---
+  footer: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    borderTopWidth: borders.hairline,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+
+  // --- Close button ---
+  closeButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: sizes.iconButton,
+    height: sizes.iconButton,
+    borderRadius: radii.sm,
+    borderWidth: 0,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.textMuted,
+    cursor: 'pointer',
+    padding: 0,
+    flexShrink: 0,
+    transitionProperty: 'background-color',
+    transitionDuration: duration.fast,
+  },
+
+  // --- Inline wrapper (for Trigger / Close children) ---
+  inlineWrapper: {
+    display: 'inline-flex',
+  },
+})

package/src/components/Dialog/parts.tsx

@@ -0,0 +1,61 @@
+import {createContext, type ReactNode, type RefObject, useContext} from 'react'
+import {html} from 'react-strict-dom'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {partStyles} from './parts.css'
+
+export type DialogSize = 'sm' | 'md' | 'lg'
+
+export interface DialogContextValue {
+  /** Rendered: open, or playing the exit animation. */
+  open: boolean
+  closing: boolean
+  closeDuration: DurationToken
+  dismissable: boolean
+  requestOpen: () => void
+  requestClose: () => void
+  titleId: string
+  descriptionId: string
+  popupRef: RefObject<HTMLDivElement | null>
+  /** Dialog.Close parts currently rendered (for the closeOnEscape dev warning). */
+  registerClose: () => () => void
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null)
+
+export function useDialog() {
+  const ctx = useContext(DialogContext)
+  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
+  return ctx
+}
+
+// The parts below are pure react-strict-dom, drawn the same on both platforms.
+
+export function Header({children}: {children: ReactNode}) {
+  return <html.div style={partStyles.header}>{children}</html.div>
+}
+
+export function Title({children}: {children: ReactNode}) {
+  const {titleId} = useDialog()
+  return (
+    <html.h2 id={titleId} style={partStyles.title}>
+      {children}
+    </html.h2>
+  )
+}
+
+export function Description({children}: {children: ReactNode}) {
+  const {descriptionId} = useDialog()
+  return (
+    <html.p id={descriptionId} style={partStyles.description}>
+      {children}
+    </html.p>
+  )
+}
+
+export function Body({children}: {children: ReactNode}) {
+  return <html.div style={partStyles.body}>{children}</html.div>
+}
+
+export function Footer({children}: {children: ReactNode}) {
+  return <html.div style={partStyles.footer}>{children}</html.div>
+}

package/src/components/Dialog/styles.css.ts

@@ -1,10 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
-import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
-import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
 import {layers} from '@duro-app/tokens/tokens/layers.css'
 
@@ -60,6 +58,8 @@ export const styles = css.create({
     borderRadius: radii.lg,
     boxShadow: shadows.lg,
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     maxHeight: '85vh',
     display: 'flex',
     flexDirection: 'column',
@@ -115,93 +115,6 @@ export const styles = css.create({
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
-  // --- Sizes ---
-  sm: {maxWidth: sizes.dialogSm},
-  md: {maxWidth: sizes.dialogMd},
-  lg: {maxWidth: sizes.dialogLg},
-
-  // --- Header ---
-  header: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    paddingTop: spacing.lg,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.md,
-    gap: spacing.md,
-  },
-
-  // --- Title ---
-  title: {
-    fontSize: typography.fontSizeLg,
-    fontWeight: typography.fontWeightSemibold,
-    lineHeight: typography.lineHeight,
-    color: colors.text,
-    margin: 0,
-  },
-
-  // --- Description ---
-  description: {
-    fontSize: typography.fontSizeSm,
-    lineHeight: typography.lineHeight,
-    color: colors.textMuted,
-    margin: 0,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.md,
-  },
-
-  // --- Body ---
-  body: {
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.lg,
-    overflowY: 'auto',
-    flex: 1,
-  },
-
-  // --- Footer ---
-  footer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: spacing.sm,
-    paddingTop: spacing.md,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.lg,
-    borderTopWidth: borders.hairline,
-    borderTopStyle: 'solid',
-    borderTopColor: colors.border,
-  },
-
-  // --- Close button ---
-  closeButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: sizes.iconButton,
-    height: sizes.iconButton,
-    borderRadius: radii.sm,
-    borderWidth: 0,
-    backgroundColor: {
-      default: 'transparent',
-      ':hover': colors.bgCardHover,
-    },
-    color: colors.textMuted,
-    cursor: 'pointer',
-    padding: 0,
-    flexShrink: 0,
-    transitionProperty: 'background-color',
-    transitionDuration: duration.fast,
-  },
-
-  // --- Inline wrapper (for Trigger / Close children) ---
-  inlineWrapper: {
-    display: 'inline-flex',
-  },
-
   // --- Reduced motion ---
   reducedMotion: {
     animationDuration: duration.minimal,