@duro-app/ui 5.10.0 → 5.12.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,5 @@
 import {type ReactNode, useState, useCallback} from 'react'
 import {html} from 'react-strict-dom'
-import {isNative} from '../../platform'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
 
@@ -30,7 +29,7 @@ export function Checkbox({
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
   const isChecked = isControlled ? controlledChecked : internalChecked
 
-  // Web: the real <input type=checkbox> drives toggling, a11y and form submit.
+  // The real <input type=checkbox> drives toggling, a11y and form submit.
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (!isControlled) {
@@ -41,54 +40,6 @@ export function Checkbox({
     [isControlled, onChange],
   )
 
-  // Native: RSD only makes <button> pressable and has no <input type=checkbox>,
-  // so the whole row is a button and we synthesize the change payload that
-  // consumers read (e.target.checked).
-  const handlePress = useCallback(() => {
-    if (disabled) return
-    const next = !isChecked
-    if (!isControlled) {
-      setInternalChecked(next)
-    }
-    onChange?.({
-      target: {checked: next, name, value},
-    } as unknown as React.ChangeEvent<HTMLInputElement>)
-  }, [disabled, isChecked, isControlled, onChange, name, value])
-
-  if (isNative) {
-    return (
-      <html.button
-        type="button"
-        onClick={handlePress}
-        disabled={disabled}
-        role="checkbox"
-        aria-checked={isChecked}
-        aria-label={!children ? ariaLabel : undefined}
-        style={[
-          styles.root,
-          styles.nativeFlex,
-          styles.nativeButton,
-          disabled && styles.rootDisabled,
-        ]}
-      >
-        <html.div
-          style={[
-            styles.box,
-            styles.nativeFlex,
-            isChecked ? styles.boxChecked : styles.boxUnchecked,
-          ]}
-        >
-          {/* CSS-border checkmark (rotated right+bottom borders) — no SVG, no
-              react-native-svg dep, so nothing is added to the web bundle. */}
-          <html.div
-            style={[styles.checkmark, isChecked ? styles.checkmarkVisible : styles.checkmarkHidden]}
-          />
-        </html.div>
-        {children && <html.span style={styles.labelText}>{children}</html.span>}
-      </html.button>
-    )
-  }
-
   return (
     <html.label style={[styles.root, disabled && styles.rootDisabled]}>
       <html.input

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -74,6 +74,9 @@ export function ConfirmDialog({
                 value={typed}
                 onChange={(e) => setTyped(e.target.value)}
                 autoFocus
+                // The phrase must match exactly: no capitalising or correcting it.
+                autoCapitalize="none"
+                spellCheck={false}
                 aria-label="confirmation phrase"
               />
             </Field.Root>

package/src/components/DetailPanel/DetailPanel.tsx

@@ -10,7 +10,8 @@ import {
   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 {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 import {styles} from './styles.css'
 
 // --- Types ---
@@ -71,34 +72,19 @@ function Root({
   onOpenChange,
   closeAnimationDuration = 'base',
 }: RootProps) {
-  const isControlled = controlledOpen !== undefined
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const [present, setPresent] = useState(defaultOpen)
-  const [closing, setClosing] = useState(false)
-  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const {present, closing, requestOpen, requestClose} = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'at-once',
+  })
   const panelRef = useRef<HTMLDivElement>(null)
   const previousFocusRef = useRef<Element | null>(null)
 
   const titleId = useId()
   const [labelId, setLabelId] = useState<string | undefined>(undefined)
 
-  const isOpen = isControlled ? controlledOpen : internalOpen
-
-  // Sync presence with open state
-  useEffect(() => {
-    if (isOpen && !present) {
-      setPresent(true)
-      setClosing(false)
-    } else if (!isOpen && present && !closing) {
-      setClosing(true)
-      closingTimerRef.current = setTimeout(() => {
-        setClosing(false)
-        setPresent(false)
-        closingTimerRef.current = null
-      }, DURATION_MS[closeAnimationDuration])
-    }
-  }, [isOpen, present, closing, closeAnimationDuration])
-
   // Focus management: move focus on open, restore on close
   useEffect(() => {
     if (present && !closing) {
@@ -131,28 +117,6 @@ function Root({
     return () => document.removeEventListener('keydown', onKeyDown)
   }, [present, closing]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
-    }
-  }, [])
-
-  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(() => {
-    if (!isControlled) setInternalOpen(false)
-    onOpenChange?.(false)
-  }, [isControlled, onOpenChange])
-
   const registerTitle = useCallback((id: string) => {
     setLabelId(id)
   }, [])

package/src/components/Dialog/Dialog.native.tsx

@@ -0,0 +1,296 @@
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {html} from 'react-strict-dom'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {mergeRefs} from '../../shared/mergeRefs'
+import {ModalContext} from '../../shared/ModalContext'
+import {OverlayModal} from '../../shared/portal/OverlayModal'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+import {Icon} from '../Icon/Icon'
+import {nativeStyles} from './native.css'
+import {partStyles} from './parts.css'
+import {
+  Description,
+  DialogContext,
+  Footer,
+  Header,
+  Title,
+  useDialog,
+  type DialogSize,
+} from './parts'
+
+export type {DialogSize}
+
+const exitDurationMap = {
+  instant: nativeStyles.exitInstant,
+  minimal: nativeStyles.exitMinimal,
+  quick: nativeStyles.exitQuick,
+  fast: nativeStyles.exitFast,
+  brisk: nativeStyles.exitBrisk,
+  base: nativeStyles.exitBase,
+  slow: nativeStyles.exitSlow,
+} as const satisfies Record<DurationToken, unknown>
+
+/** Native-only wiring: where accessibility focus goes on open and returns on close. */
+interface NativeDialogContextValue {
+  triggerRef: RefObject<unknown>
+  panelRef: RefObject<View | null>
+  closeOnEscape: boolean
+}
+
+const NativeDialogContext = createContext<NativeDialogContextValue | null>(null)
+
+function useNativeDialog() {
+  const ctx = useContext(NativeDialogContext)
+  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
+  return ctx
+}
+
+interface RootProps {
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Whether pressing the backdrop closes the dialog. Default: true */
+  dismissable?: boolean
+  /** Whether Android's back button closes the dialog (Escape on the web). Default: true */
+  closeOnEscape?: boolean
+  /** Web only: on native, screen-reader focus moves to the dialog itself. */
+  initialFocus?: RefObject<HTMLElement | null>
+  closeAnimationDuration?: DurationToken
+}
+
+/**
+ * Native Dialog (plan N0, Slice A): the same compound API, rendered in an
+ * OverlayModal. The backdrop press and Android's back button close it; the
+ * screen reader's focus moves into the panel on open and back to the trigger
+ * on close.
+ */
+function Root({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  closeOnEscape = true,
+  closeAnimationDuration = 'fast',
+}: RootProps) {
+  const {present, closing, requestOpen, requestClose} = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
+  const titleId = useId()
+  const descriptionId = useId()
+  const popupRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<unknown>(null)
+  const panelRef = useRef<View>(null)
+  const registerClose = useCallback(() => () => {}, [])
+
+  // Back to the trigger once the dialog is gone.
+  const wasPresent = useRef(present)
+  useEffect(() => {
+    if (wasPresent.current && !present) focusForAccessibility(triggerRef.current, 'Dialog')
+    wasPresent.current = present
+  }, [present])
+
+  return (
+    <DialogContext.Provider
+      value={{
+        open: present,
+        closing,
+        closeDuration: closeAnimationDuration,
+        dismissable,
+        requestOpen,
+        requestClose,
+        titleId,
+        descriptionId,
+        popupRef,
+        registerClose,
+      }}
+    >
+      <NativeDialogContext.Provider value={{triggerRef, panelRef, closeOnEscape}}>
+        {children}
+      </NativeDialogContext.Provider>
+    </DialogContext.Provider>
+  )
+}
+
+interface PressableChildProps {
+  onClick?: () => void
+  ref?: Ref<unknown>
+}
+
+/**
+ * Opens the dialog from its one child (a Button). Native presses do not
+ * bubble to a wrapper as web clicks do, so the child gets the handler, and
+ * its ref is where focus returns on close.
+ */
+function Trigger({children}: {children: ReactNode}) {
+  const {requestOpen} = useDialog()
+  const {triggerRef} = useNativeDialog()
+  const child = Children.only(children)
+  if (!isValidElement<PressableChildProps>(child)) return null
+  const own = child.props.onClick
+  return cloneElement(child as ReactElement<PressableChildProps>, {
+    ref: mergeRefs(child.props.ref, triggerRef),
+    onClick: () => {
+      own?.()
+      requestOpen()
+    },
+  })
+}
+
+interface PortalProps {
+  children: ReactNode
+  size?: DialogSize
+}
+
+function Portal({children, size = 'md'}: PortalProps) {
+  const {open, closing, closeDuration, dismissable, requestClose, titleId} = useDialog()
+  const {panelRef, closeOnEscape} = useNativeDialog()
+  // First frame hidden, then shown: the enter transition has a start state.
+  const [entered, setEntered] = useState(false)
+  useEffect(() => {
+    if (!open) {
+      setEntered(false)
+      return
+    }
+    const frame = requestAnimationFrame(() => setEntered(true))
+    return () => cancelAnimationFrame(frame)
+  }, [open])
+
+  // 85% of the window, as the web caps the panel at 85vh.
+  const maxPanelHeight = useWindowDimensions().height * 0.85
+  const shown = entered && !closing
+  const visibility = shown ? nativeStyles.shown : nativeStyles.hidden
+  return (
+    <OverlayModal
+      visible={open}
+      onRequestClose={() => {
+        if (closeOnEscape) requestClose()
+      }}
+      onShow={() => focusForAccessibility(panelRef.current, 'Dialog')}
+    >
+      <html.div
+        aria-hidden
+        onClick={dismissable ? requestClose : undefined}
+        style={[
+          nativeStyles.fill,
+          nativeStyles.backdrop,
+          shown ? nativeStyles.shown : nativeStyles.hidden,
+          closing && exitDurationMap[closeDuration],
+        ]}
+      />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={localStyles.viewport} pointerEvents="box-none">
+          <html.div style={nativeStyles.inset}>
+            <View ref={panelRef} accessibilityViewIsModal style={localStyles.panelHost}>
+              <html.div
+                role="dialog"
+                aria-modal
+                aria-labelledby={titleId}
+                style={[
+                  nativeStyles.popup,
+                  nativeStyles.maxHeight(maxPanelHeight),
+                  partStyles[size],
+                  visibility,
+                  closing && exitDurationMap[closeDuration],
+                ]}
+              >
+                <ModalContext.Provider value={true}>
+                  <ControlContextBoundary>{children}</ControlContextBoundary>
+                </ModalContext.Provider>
+              </html.div>
+            </View>
+          </html.div>
+        </View>
+      </KeyboardAvoidingView>
+    </OverlayModal>
+  )
+}
+
+// Layout-only RN views: the centring viewport lets presses outside the panel
+// through to the backdrop (`box-none`, which RSD styles cannot express), and
+// the panel host spans the width so the panel's size cap applies.
+const localStyles = StyleSheet.create({
+  viewport: {flex: 1, alignItems: 'center', justifyContent: 'center'},
+  panelHost: {width: '100%', alignItems: 'center'},
+  body: {flexGrow: 0, flexShrink: 1},
+})
+
+/** Native Body: a ScrollView, since a native div does not scroll its overflow. */
+function Body({children}: {children: ReactNode}) {
+  return (
+    <ScrollView style={localStyles.body}>
+      <html.div style={nativeStyles.bodyContent}>{children}</html.div>
+    </ScrollView>
+  )
+}
+
+interface CloseProps {
+  children?: ReactNode
+  'aria-label'?: string
+}
+
+function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
+  const {requestClose} = useDialog()
+  if (children) {
+    const child = Children.only(children)
+    if (!isValidElement<PressableChildProps>(child)) return null
+    const own = child.props.onClick
+    return cloneElement(child as ReactElement<PressableChildProps>, {
+      onClick: () => {
+        own?.()
+        requestClose()
+      },
+    })
+  }
+  return (
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={partStyles.closeButton}>
+      <Icon name="x" size="sm" color="textMuted" />
+    </html.button>
+  )
+}
+
+export const Dialog = {
+  Root,
+  Trigger,
+  Portal,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Close,
+}

package/src/components/Dialog/Dialog.stories.tsx

@@ -13,6 +13,7 @@ import {Select} from '../Select/Select'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {DURATION_MS} from '@duro-app/tokens/keys'
 
 const meta: Meta = {
   title: 'Components/Dialog',
@@ -560,3 +561,73 @@ export const CloseOnEscapeOff: Story = {
     await expect(screen.getByRole('dialog', {name: 'Required step'})).toBeInTheDocument()
   },
 }
+
+// --- Close semantics (useOverlayOpenState) ---
+
+function DoubleCloseDemo() {
+  const [closes, setCloses] = useState(0)
+  return (
+    <Stack gap="md">
+      <Text>Closes reported: {closes}</Text>
+      <Dialog.Root
+        defaultOpen
+        onOpenChange={(next) => {
+          if (!next) setCloses((count) => count + 1)
+        }}
+      >
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>Close twice</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Footer>
+            <Dialog.Close>
+              <Button>Done</Button>
+            </Dialog.Close>
+          </Dialog.Footer>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </Stack>
+  )
+}
+
+/** A second close while the exit animation plays reports the close once. */
+export const DoubleCloseReportsOnce: Story = {
+  render: () => <DoubleCloseDemo />,
+  play: async ({canvasElement}) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const done = await doc.findByRole('button', {name: 'Done'})
+    await userEvent.click(done)
+    await userEvent.click(done)
+    await waitFor(() => expect(doc.queryByRole('dialog')).toBeNull())
+    // Past every exit timer a second close could have started.
+    await new Promise((resolve) => setTimeout(resolve, DURATION_MS.fast * 2))
+    await expect(within(canvasElement).getByText('Closes reported: 1')).toBeInTheDocument()
+  },
+}
+
+function ControlledCloseDemo() {
+  const [open, setOpen] = useState(true)
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen} closeAnimationDuration="slow">
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Closed by its owner</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Button onClick={() => setOpen(false)}>Save</Button>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+/** A controlled `open` that turns false plays the exit animation before unmounting. */
+export const ControlledCloseAnimates: Story = {
+  render: () => <ControlledCloseDemo />,
+  play: async ({canvasElement}) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(await doc.findByRole('button', {name: 'Save'}))
+    await expect(doc.getByRole('dialog')).toBeInTheDocument()
+    await waitFor(() => expect(doc.queryByRole('dialog')).toBeNull())
+  },
+}